如何将代码突出显示添加到VuePress？
如何将代码突出显示添加到VuePress？
提问于 2018-08-17 00:21:07
默认情况下，VuePress似乎只支持少数几种语言来进行语法突出显示(默认主题也是如此)。
文档中经常提到"Line highlight“，但这是一个完全不同的功能，用于突出显示代码片段中的特定行。我正在寻找的能力，有语法突出显示的方案片段，或Java或PHP或其他。
开箱即用，我只看到对JS，TypeScript，HTML，Markdown，JSON，Ruby，Python，Shell的支持。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-28 11:15:29
要使vuepress的语法高亮显示适用于其中一种默认不进行高亮显示的语言，您需要为该语言添加CSS规则。
在.vuepress/style.styl中，为方案支持添加以下规则：
div[class~=language-scheme]:before {
content:"scheme"
}或者执行以下命令以支持docker文件：
div[class~=language-docker]:before {
content:"docker"
}Stack Overflow用户
发布于 2018-08-28 07:01:07
开箱即用的主题由两部分组成: VuePress本身和它的默认主题。
VuePress本身通过使用prismjs来处理“语法”部分。prismjs转换下面的markdown
```SQL选择column1
来自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来高亮显示这些令牌类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51881493
复制相关文章
相似问题