CODEWITHSUNDEEP
vuepress
Khepin
Khepin

Reputation: 949

How to add code highlighting to VuePress?

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.

Upvotes: 5

Views: 2308

Answers (2)

Khepin
Khepin

Reputation: 949

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

Upvotes: 7

ocavue
ocavue

Reputation: 413

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.

Upvotes: 3

Related Questions