Highlighters

Slidev uses Shiki as the code highlighter. It's a TextMate grammar-powered syntax highlighter that generates colored tokens, so there is no additional CSS needed. Since it has great grammar support, the generated colors are very accurate, just like what you will see in VS Code. Shiki also comes with a bunch of built-in themes. In Slidev, we also provided the TwoSlash support is also built-in.

Configure Shiki

Environment: both

This setup function will run on both Node.js and client side. Avoid using either Node's or DOM API to avoid 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.