How to add code highlighting to VuePress?

Question

VuePress seems to only support a handful of languages for doing syntax highlighting by default (also with the default theme).

The documentation mention "Line Highlighting" a lot, but that's a totally different feature to highlight a specific line within a code snippet. I'm looking for the ability to have syntax highlighting on a snippet of Scheme, or Java or PHP or others.

Out of the box, I only see support for JS, TypeScript, HTML, Markdown, JSON, Ruby, Python, Shell.

score 6 · Accepted Answer · answered Aug 28 '18 at 03:15

To enable vuepress's syntax highlighting for one of the languages where it doesn't do highlighting by default, you need to add a CSS rule for that language.

In .vuepress/style.styl, add the following rule for scheme support:

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

Or the following for docker file support:

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

score 3 · Answer 2 · answered Aug 27 '18 at 23:01

The VuePress out of the box is made by two parts: VuePress itself and its default theme.

VuePress itself handler the "syntax" part by using prismjs. prismjs transform the markdown below

```SQL
SELECT column1
FROM table_name;
```

into the html below

<code>
    <span class="token keyword">SELECT</span>
    column1
    <span class="token keyword">FROM</span>
    table_name
    <span class="token punctuation">;</span>
</code>

You can find prismjs's supported languages at here.

I don't know the previous situation, but at least VuePress v0.14.2 supports all languages supported by prismjs.

The default theme handler the "highlighting" part by import prismjs's css to color those token classes.

How to add code highlighting to VuePress?

2 Answers2