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处理“语法”部分。 pyramidjs转换下面的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支持pyramidjs支持的所有语言。

默认主题处理程序通过导入prismjs's css来为那些标记类上色，以“突出显示”部分。

如何将代码突出显示添加到VuePress？

2 个答案: