Shiki

/plugin-shiki adds syntax highlighting to fenced code blocks using Shiki. It supports every VS Code theme and 200+ languages out of the box.

Installation

pnpm add /plugin-shiki

Basic usage

// stedefast.config.ts
import { defineConfig } from "@stedefast/core";
import { ShikiPlugin } from "/plugin-shiki";

export default defineConfig({
  // ...
  plugins: [
    ShikiPlugin({ theme: "github-dark" }),
  ],
});

Any fenced code block in your Markdown will be highlighted:

```typescript
const greeting: string = "Hello, world!";
console.log(greeting);
```

Dual light/dark themes

Use CSS variables to switch themes based on the user's colour scheme preference:

ShikiPlugin({
  themes: {
    light: "github-light",
    dark: "github-dark",
  },
})

Shiki renders both themes and uses CSS variables (--shiki-light, --shiki-dark) for the colours. Add this CSS to your theme's global.css to activate it:

/* In theme/styles/global.css */
.shiki,
.shiki span {
  color: var(--shiki-light);
  background-color: var(--shiki-light-bg);
}

@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
    color: var(--shiki-dark);
    background-color: var(--shiki-dark-bg);
  }
}

If your theme uses a manual dark mode class (e.g. .dark on <html>), use:

.dark .shiki,
.dark .shiki span {
  color: var(--shiki-dark);
  background-color: var(--shiki-dark-bg);
}

Options reference

Option	Type	Default	Description
theme	string	"github-dark"	Single Shiki theme name. Mutually exclusive with themes.
themes	{ light, dark }	—	Dual theme for CSS-variable-based light/dark switching. Mutually exclusive with theme.
langs	string[]	all bundled	Restrict which languages are pre-loaded. Reduces memory use on large sites.
defaultLanguage	string	"text"	Language used for code blocks with no language tag.
fallbackLanguage	string	—	Language to use when the specified language is not loaded.
addLanguageClass	boolean	true	Adds language-* class to <code> elements.
lazy	boolean	true	Load languages on-demand rather than pre-loading all 200+. Strongly recommended.

Performance

lazy: true (the default) loads languages on demand as they are first encountered in a build. This avoids the ~2s startup cost of loading all 200+ bundled languages upfront.

For very large sites, restrict the language set to improve build times:

ShikiPlugin({
  theme: "github-dark",
  langs: ["typescript", "javascript", "bash", "json", "yaml", "css", "html"],
})

Theme names

Any VS Code theme is supported. Popular choices:

• github-dark / github-light
• one-dark-pro
• catppuccin-mocha / catppuccin-latte
• nord
• dracula
• solarized-dark / solarized-light

Browse the full list at shiki.style/themes.