DocsThesisCode Syntax Highlight

Code Syntax Highlight

By default, Ghost displays code cards without syntax highlighting. The Thesis theme offers a solution to automatically add syntax highlighting to all code cards.

Code Injection is required to add custom JS.

The Thesis theme includes an API to integrate Shiki for syntax highlighting in all code cards. Insert the following code snippet into your site:

<script>
window.pvs?.initCodeHighlight?.();
</script>

Advanced Usage

This code snippet adds a code syntax highlighting to all code blocks. If you want to add additional features such as line numbers and language badge, use the following code snippet:

<script>
window.pvs?.initCodeHighlight?.({
    clipboardButton: true,
    lineNumbers: true,
    languageBadge: true,
});
</script>

Supported Languages

The Thesis theme utilizes the Shiki library, which supports a wide range of languages. See the Shiki Supported Languages for the complete list.

To select the language for your code block, insert the language ID into the Language setting in your code card:

Code Syntax Highlight Languages

Automatic Language Detection

While our script supports automatic language detection, it is essential to choose a language for your code block, as automatic detection may not always be accurate.

The following languages are supported by our automatic language detection:

CategoryLanguages
Special formatsjson, yaml
Markup languagesmarkdown, html
Strongly typed languagestypescript, c++, java, c#
Scripting languagespython, javascript, php, ruby
Modern languagesrust, go, swift, kotlin, dart
Query languagessql
Scientific/Statistical languagesr, matlab
Shell scriptingbash
Stylingcss