Skip to content

Slidev 内建了两种语法高亮器供你使用:

Prism 是最受欢迎的语法高亮器之一。它在代码文本中插入标签包裹需要高亮的元素并通过 CSS 文件来设置高亮样式。你可以直接使用 Prism 官方预设的主题,或者通过 prism-theme-vars 快速创建自己的高亮主题。

Shiki,一个基于 TextMate 语法的代码高亮器。它直接生成带样式的包裹元素,所以不需要引入额外的 CSS 文件。因为基于 TextMate 语法,所以生成的高亮区块非常准确,效果类似于 VS Code。Shiki also comes with a bunch of built-in themes. In Slidev, we also provided the TwoSlash support is also built-in.

Slidev 主题通常会同时支持 Prism 和 Shiki,不过需要注意有些主题可能只会支持其中一种。

你可以参考以下描述来选择使用哪种高亮器:

  • Prism 更容易自定义样式
  • Shiki 生成的高亮区块更加准确

Slidev uses Shiki by default since v0.47. You can switch to it by adding the following to your slides.md:

yaml
---
highlighter: Prism
---

配置 Shiki

环境: node
此配置仅在 Node.js 环境下运行。你可以访问 Node.js 的相关 API 了解更多。

创建 ./setup/shiki.ts 文件并添加以下代码:

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

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

所有可选的主题请参阅 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.

Released under the MIT License.