Configure Highlighter

Slidev uses Shiki as the code highlighter. It's a TextMate Grammar powered syntax highlighter as accurate as VS Code. It generates colored tokens so no additinal CSS is required. Shiki also comes with a bunch of built-in themes. In Slidev, we also provided the TwoSlash support.

Configure Shiki

Environment: both

This setup function will run on both Node.js and client side. Avoid using Node.js or DOM API to prevent runtime errors.

Create ./setup/shiki.ts file with the following content:

/* ./setup/shiki.ts */
import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: 'min-dark',
      light: 'min-light',
    },
    transformers: [
      // ...
    ],
  }
})

If you want to add custom theme or language (TextMate grammar/themes in JSON), you can import them in the setup file:

/* ./setup/shiki.ts */
import { defineShikiSetup } from '@slidev/types'
import customTheme from './customTheme.tmTheme.json'
import customLanguage from './customLanguage.tmLanguage.json'

export default defineShikiSetup(() => {
  return {
    themes: {
      dark: customTheme,
      light: 'min-light',
    },
    langs: [
      'js',
      'typescript',
      'cpp',
      customLanguage,
      // ...
    ],
    transformers: [
      // ...
    ],
  }
})

Check Built-in languages and Built-in themes, and refer to Shiki's docs for more details.

INFO

For now, Shiki Magic Move does not support transformers.

Configure Prism

WARNING

Prism support is deprecated and will be removed in the future. Please consider using Shiki instead.

To configure your Prism, you can just import the theme CSS or use prism-theme-vars to configure themes for both light and dark mode. Refer to its docs for more details.