如何为 VuePress 添加代码高亮？

Question

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

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

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

Answer 1

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

VuePress 本身通过使用 prismjs 处理 "syntax" 部分。 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支持的语言

默认主题处理程序 "highlighting" 部分通过导入 prismjs's css 来为这些标记着色类。

Answer 2

要为其中一种默认不高亮的语言启用 vuepress 的语法高亮，您需要为该语言添加 CSS 规则。

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

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

或以下 docker 文件支持：

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

如何为 VuePress 添加代码高亮？

How to add code highlighting to VuePress?

vuepress