mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-25 11:28:13 +08:00
107 lines
3.0 KiB
Markdown
107 lines
3.0 KiB
Markdown
---
|
||
title: 介绍
|
||
author: pengzhanbo
|
||
icon: ic:outline-code
|
||
createTime: 2024/04/04 10:35:45
|
||
permalink: /guide/code/intro/
|
||
---
|
||
|
||
## 概述
|
||
|
||
主题 使用 [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]
|
||
}
|
||
}
|
||
})
|
||
})
|
||
```
|
||
|
||
---
|
||
|
||
<Badge type="warning" text="v1.0.0-rc.105 更新" />
|
||
随着 `shiki` 支持的语言越来越丰富，默认加载全部的语言所花费的时间越来越多了，
|
||
因此 **强烈建议您 手动配置 `languages`** ，仅加载 您需要的 语言。
|
||
|
||
同时，在您未配置 `languages` 时，主题会在启动时尝试分析 `markdown` 文件中的代码块所使用的语言，
|
||
并将它们作为 `languages` 传入给 shiki，这也极大的减少了加载时间。然而随着 项目 `markdown` 文件数量和内容的增长，
|
||
这种方式带来额外的 i/o 开销和解析开销也会越来越长，因此 **强烈建议您手动配置 `languages`** 。
|
||
:::
|
||
|
||
## 语言
|
||
|
||
[Shiki](https://shiki.style/) 支持 超过 190+ 种语言，
|
||
你可以在 [languages](https://shiki.style/languages) 查看所有支持的语言列表。
|
||
|
||
你可以通过以下语法为你使用的 语言所编写的代码 实现高亮效果：
|
||
|
||
````md
|
||
```[lang]
|
||
```
|
||
````
|
||
|
||
其中，`[lang]` 为你使用的语言。
|
||
|
||
示例：
|
||
|
||
````md
|
||
```js
|
||
const a = 1
|
||
console.log(a)
|
||
```
|
||
````
|
||
|
||
```js
|
||
const a = 1
|
||
console.log(a)
|
||
```
|
||
|
||
## 高亮主题
|
||
|
||
[Shiki](https://shiki.style/) 支持 超过 40+ 种高亮主题。
|
||
|
||
你可以在 [Themes](https://shiki.style/themes) 找到所有支持的主题列表，根据个人的喜欢自定义
|
||
高亮主题。
|
||
|
||
Theme Plume 默认为 代码块使用的主题配置：
|
||
|
||
```ts
|
||
export default defineUserConfig({
|
||
theme: plumeTheme({
|
||
plugins: {
|
||
shiki: {
|
||
theme: { light: 'vitesse-light', dark: 'vitesse-dark' }, // [!code highlight]
|
||
}
|
||
}
|
||
})
|
||
})
|
||
```
|
||
|
||
默认配置支持在 亮色/暗色 模式分别使用 `vitesse-light`/`vitesse-dark` 主题。
|
||
|
||
## 更多支持
|
||
|
||
得益于 [Shiki](https://shiki.style/) 的强大能力，Theme Plume 还为 代码块
|
||
提供了 更多的 [特性支持](./特性支持.md)，它们让 代码块具备更强的表达能力。
|
||
|
||
同时，为了方便 更好的 完成 代码演示，Theme Plume 还提供了嵌入 [CodePen](../代码演示/codepen.md)，
|
||
[Js Fiddle](../代码演示/jsFiddle.md)，[Code Sandbox](../代码演示/codeSandbox.md)，
|
||
[Replit](../代码演示/replit.md) 的语法支持，你可以很方便的嵌入代码演示。
|
||
|
||
## 示例
|
||
|
||
<!-- @include: ../../snippet/code-block.snippet.md -->
|