docs: update docs

This commit is contained in:
pengzhanbo 2024-06-18 14:57:06 +08:00
parent 28ae80e284
commit e77c8cbc54
2 changed files with 40 additions and 7 deletions

View File

@ -14,9 +14,20 @@ permalink: /guide/markdown/experiment/
该功能由 [shiki](https://shiki.style/) 和 [@shikijs/twoslash](https://shiki.style/packages/twoslash) 提供支持,
并整合在 [@vuepress-plume/plugin-shikiji](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-shikiji) 中。
> [!important]
> 从 `vuepress@2.0.0-rc.12` 开始,不再需要对 `@vuepress/markdown` 进行额外的 hack 操作,
> 因此,现在你可以安全的使用这项功能了!
:::important
`vuepress@2.0.0-rc.12` 开始,不再需要对 `@vuepress/markdown` 进行额外的 hack 操作,
因此,现在你可以安全的使用这项功能了!
:::
::: warning
`twoslash` 是一个比较耗时的功能,由于它需要对代码进行类型编译,如果代码引入的包 比较大,会花费较长时间。
特别的,由于 vuepress 启动时,会预编译所有的 markdown 文件,因此它会直接影响 vuepress 的启动时间,
如果 包含了比较多的 `twoslash` 代码块,这可能会使 vuepress 启动时间变得很长。
比如,在未使用 `twoslash`vuepress 的启动时间区间大约在 `300ms ~ 1000ms` 之间,而在使用 `twoslash` 后,
可能某一个 `twoslash` 的代码块编译耗时就需要额外再等待 `500ms` 以上。
:::
### 概述

View File

@ -8,11 +8,33 @@ permalink: /guide/code/intro/
## 概述
主题 使用 [Shiki](https://github.com/shikijs/shiki) 在 Markdown 代码块实现语法高亮。
主题 使用 [Shiki](https://shiki.style/) 在 Markdown 代码块实现语法高亮。
:::info
主题默认 加载了 [Shiki](https://shiki.style/) 支持的超过 190+ 的 语言,这可能导致 在启用 vuepress 服务时,
需要多等待 **300ms ~ 600ms** 左右的时间来加载所有的 语言。
因此,如果比较在意 vuepress 启动时间,建议修改配置为仅加载 您所需要的 语言。
示例:
```ts
export default defineUserConfig({
theme: plumeTheme({
plugins: {
shiki: {
languages: ['javascript', 'typescript', 'vue', 'bash', 'sh'], // [!code highlight]
}
}
})
})
```
:::
## 语言
[Shiki](https://github.com/shikijs/shiki) 支持 超过 190+ 种语言,
[Shiki](https://shiki.style/) 支持 超过 190+ 种语言,
你可以在 [languages](https://shiki.style/languages) 查看所有支持的语言列表。
你可以通过以下语法为你使用的 语言所编写的代码 实现高亮效果:
@ -40,7 +62,7 @@ console.log(a)
## 高亮主题
[Shiki](https://github.com/shikijs/shiki) 支持 超过 40+ 种高亮主题。
[Shiki](https://shiki.style/) 支持 超过 40+ 种高亮主题。
你可以在 [Themes](https://shiki.style/themes) 找到所有支持的主题列表,根据个人的喜欢自定义
高亮主题。
@ -63,7 +85,7 @@ export default defineUserConfig({
## 更多支持
得益于 [Shiki](https://github.com/shikijs/shiki) 的强大能力Theme Plume 还为 代码块
得益于 [Shiki](https://shiki.style/) 的强大能力Theme Plume 还为 代码块
提供了 更多的 [特性支持](/guide/code/features/),它们让 代码块具备更强的表达能力。
同时,为了方便 更好的 完成 代码演示Theme Plume 还提供了嵌入 [CodePen](/guide/code/code-pen/)