配置代码高亮器

Slidev 使用 Shiki 作为代码高亮器。它是一个由 TextMate Grammar 驱动的语法高亮器，与 VS Code 一样精确。它生成彩色标记，因此不需要额外的 CSS。Shiki 还自带大量内置主题。在 Slidev 中，我们还提供了 TwoSlash 支持。

配置 Shiki

运行环境: both

该文件中的代码将在 Node.js 和 中浏览器 运行。请避免使用 Node.js 或 DOM API 以防止出现运行时错误。

创建 ./setup/shiki.ts 文件，内容如下：

setup/shiki.ts

import { defineShikiSetup } from '@slidev/types'

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

如果你想添加自定义主题或语言（JSON 格式的 TextMate grammar/themes），可以在 setup 文件中导入它们：

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: [
      // ...
    ],
  }
})

查看内置语言和内置主题，并参考 Shiki 的文档了解更多详情。

INFO

目前，Shiki Magic Move 不支持 transformers。

配置 Prism

WARNING

自 v0.50 起，Prism 支持已被移除。请改用 Shiki。