[!IMPORTANT] This package is primarily intended for internal use.

@madebywild/sanity-code-field

Sanity code field with a Monaco Editor input and Shiki-based syntax highlighting. The highlighted HTML is pre-rendered in the Studio so frontends can display it without loading a runtime highlighter.

Install

pnpm add @madebywild/sanity-code-field

Configure Plugin

import { defineConfig } from "sanity";
import { wildSanityCodeFieldPlugin } from "@madebywild/sanity-code-field";

export default defineConfig({
  plugins: [
    wildSanityCodeFieldPlugin({
      themes: { light: "vitesse-light", dark: "vitesse-dark" },
      languages: ["bash", "javascript", "typescript", "css", "html"],
    }),
  ],
});

Use in Schema

import { defineField } from "sanity";

defineField({
  name: "codeBlock",
  type: "wild.code",
});

Stored Value

The field stores three properties:

| Property | Type | Description | | ---------- | -------- | ----------------------------------------- | | code | string | Raw source code | | language | string | Language identifier (e.g. "typescript") | | html | string | Pre-rendered highlighted HTML from Shiki |

The html string contains both light and dark theme colours via CSS variables. color and background-color for light mode are applied via inline styles; font-style, font-weight, and text-decoration for both themes are stored as --shiki-light-* / --shiki-dark-* CSS variables. No Shiki dependency required at runtime.

Query Data

Fetch the code block fields with GROQ — all three properties live directly on the object:

*[_type == "post"]{
  codeBlock {
    code,
    language,
    html
  }
}

Render in React

Because the HTML is pre-rendered in the Studio, the frontend only needs to inject it and provide the dark-mode CSS toggle:

function CodeBlock({ html }: { html: string }) {
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
}

Add the theme CSS once globally (e.g. in your stylesheet or a <style> tag):

.shiki {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  border-radius: 0.375rem;
  padding: 1rem;
  overflow-x: auto;
}

/* Light mode — color & background-color come from inline styles,
   font-style/weight/decoration are stored as CSS variables */
.shiki,
.shiki span {
  font-style: var(--shiki-light-font-style) !important;
  font-weight: var(--shiki-light-font-weight) !important;
  text-decoration: var(--shiki-light-text-decoration) !important;
}

/* Dark mode — swap all token colors and styles to the dark variant */
@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

If you toggle dark mode with a CSS class instead of prefers-color-scheme, swap the media query for your class selector (e.g. .dark .shiki, .dark .shiki span { … }).

The code and language values are available for copy-to-clipboard buttons, filename labels, or any other UI you want to build around the highlighted block.

Regenerate HTML After Theme Changes

The html field is generated when a code block is saved in the Studio. If you change the themes option in your plugin config, existing documents will still contain HTML rendered with the old themes.

To regenerate all code blocks with your new themes, copy the example migration script into your project and install the required dependencies:

cp node_modules/@madebywild/sanity-code-field/examples/regenerate-code-html.ts ./
npm install -D shiki tsx

Open the file and set THEMES to match your new plugin config. The script searches all documents automatically and reads SANITY_PROJECT_ID, SANITY_DATASET, and SANITY_API_TOKEN_READ_WRITE from your .env file. Run a dry-run first to preview changes:

npx tsx regenerate-code-html.ts

When satisfied, apply the changes:

npx tsx regenerate-code-html.ts --apply