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.

Answer 1

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"
}