如何向 VuePress 添加代码高亮？

Posted 2023-02-22

【中文标题】如何向 VuePress 添加代码高亮？

【英文标题】：How to add code highlighting to VuePress?

【发布时间】：2019-01-23 16:13:42

【问题描述】：

VuePress 似乎只支持少数几种语言在默认情况下进行语法高亮显示（也使用默认主题）。

文档中多次提到“行高亮”，但这是在代码 sn-p 中高亮特定行的完全不同的功能。我正在寻找在 Scheme、Java、php 或其他的 sn-p 上突出显示语法的能力。

开箱即用，我只看到对 JS、TypeScript、html、Markdown、JSON、Ruby、Python、Shell 的支持。

【参考方案1】：

要为默认情况下不突出显示的一种语言启用 vuepress 的语法突出显示，您需要为该语言添加 CSS 规则。

在.vuepress/style.styl中，为方案支持添加如下规则：

div[class~=language-scheme]:before 
    content:"scheme"

或以下用于 docker 文件支持：

div[class~=language-docker]:before 
    content:"docker"

【参考方案2】：

开箱即用的 VuePress 由两部分组成：VuePress 本身及其默认主题。

VuePress 本身使用prismjs 处理“语法”部分。 prismjs 变换下面的markdown

```SQL
SELECT column1
FROM table_name;
```

进入下面的html

<code>
    <span class="token keyword">SELECT</span>
    column1
    <span class="token keyword">FROM</span>
    table_name
    <span class="token punctuation">;</span>
</code>

您可以在here 找到 prismjs 支持的语言。

不知道之前的情况，但至少VuePress v0.14.2支持prismjs支持的所有语言。

默认主题处理程序的“突出显示”部分通过导入 prismjs's css 为这些标记类着色。