vuepress - 如何向 VuePress 添加代码高亮显示？

Question

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

文档多次提到“行突出显示”，但这是一个完全不同的功能，可以突出代码片段中的特定行。我正在寻找在 Scheme、Java 或 PHP 或其他代码片段上突出显示语法的能力。

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

Answer 1

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

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

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

或以下用于 docker 文件支持：

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

Answer 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>

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

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

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