Highlighters #

Slidev comes with two syntax highlighter for you to choose from:

• Prism
• Shiki

Prism is one of the most popular syntax highlighters. The highlighting is done by adding token classes to the code and it's colored using CSS. You can browse through their official themes, or create/customize one yourself very easily using prism-theme-vars.

Shiki, on the other hand, is a TextMate grammar-powered syntax highlighter. It 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. The downside of Shiki is that it also requires TextMate themes (compatible with VS Code theme) to do the highlighting, which can be a bit harder to customize.

Slidev themes usually support both Prism and Shiki, but depending on the theme you are using, it might only support one of them.

When you have the choice, the tradeoff is basically:

• Prism for easier customization
• Shiki for more accurate highlighting

By default, Slidev uses Prism. You can change it by modifying your frontmatter:

---
highlighter: shiki
---

Configure Prism #

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.

Configure Shiki #

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

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

export default defineShikiSetup(() => {
  return {
    theme: {
      dark: 'min-dark',
      light: 'min-light',
    },
  }
})

Refer to Shiki's docs for available theme names.

Or if you want to use your own theme:

/* ./setup/shiki.ts */

import { defineShikiSetup } from '@slidev/types'

export default defineShikiSetup(async({ loadTheme }) => {
  return {
    theme: {
      dark: await loadTheme('path/to/theme.json'),
      light: await loadTheme('path/to/theme.json'),
    },
  }
})