diff --git a/docs/notes/theme/guide/代码/twoslash.md b/docs/notes/theme/guide/代码/twoslash.md index 8c95aeda..5f844d8d 100644 --- a/docs/notes/theme/guide/代码/twoslash.md +++ b/docs/notes/theme/guide/代码/twoslash.md @@ -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` 以上。 +::: ### 概述 diff --git a/docs/notes/theme/guide/代码/介绍.md b/docs/notes/theme/guide/代码/介绍.md index 614cfd4c..c636451b 100644 --- a/docs/notes/theme/guide/代码/介绍.md +++ b/docs/notes/theme/guide/代码/介绍.md @@ -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/),