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

Question

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

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

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

标签： vuepress

Answer 1

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

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

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

或以下用于 docker 文件支持：

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