vuepress-theme-plume/docs/notes/theme/guide/代码/介绍.md

title, author, icon, createTime, permalink

title	author	icon	createTime	permalink
介绍	pengzhanbo	ic:outline-code	2024/04/04 10:35:45	/guide/code/intro/

概述

主题 使用 Shiki 在 Markdown 代码块实现语法高亮。

:::info 主题默认 加载了 Shiki 支持的超过 190+ 的 语言，这可能导致 在启用 vuepress 服务时， 需要多等待 300ms ~ 600ms 左右的时间来加载所有的 语言。

因此，如果比较在意 vuepress 启动时间，建议修改配置为仅加载 您所需要的 语言。

示例：

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      shiki: {
        languages: ['javascript', 'typescript', 'vue', 'bash', 'sh'], // [!code highlight]
      }
    }
  })
})

:::

语言

Shiki 支持 超过 190+ 种语言， 你可以在 languages 查看所有支持的语言列表。

你可以通过以下语法为你使用的 语言所编写的代码 实现高亮效果：

```[lang]
```

其中，[lang] 为你使用的语言。

示例：

```js
const a = 1
console.log(a)
```

const a = 1
console.log(a)

高亮主题

Shiki 支持 超过 40+ 种高亮主题。

你可以在 Themes 找到所有支持的主题列表，根据个人的喜欢自定义 高亮主题。

Theme Plume 默认为 代码块使用的主题配置：

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      shiki: {
        theme: { light: 'vitesse-light', dark: 'vitesse-dark' }, // [!code highlight]
      }
    }
  })
})

默认配置支持在 亮色/暗色 模式分别使用 vitesse-light/vitesse-dark 主题。

更多支持

得益于 Shiki 的强大能力，Theme Plume 还为 代码块 提供了 更多的 特性支持，它们让 代码块具备更强的表达能力。

同时，为了方便 更好的 完成 代码演示，Theme Plume 还提供了嵌入 CodePen， Js Fiddle，Code Sandbox， Replit 的语法支持，你可以很方便的嵌入代码演示。

示例