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 customLanguage from './customLanguage.tmLanguage.json'
import customTheme from './customTheme.tmTheme.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 has been removed since v0.50. Please use Shiki instead.