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 (opens in a new tab) 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 (opens in a new tab) for the complete list.
To select the language for your code block, insert the language ID into the Language
setting in your code card:
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:
Category | Languages |
---|---|
Special formats | json , yaml |
Markup languages | markdown , html |
Strongly typed languages | typescript , c++ , java , c# |
Scripting languages | python , javascript , php , ruby |
Modern languages | rust , go , swift , kotlin , dart |
Query languages | sql |
Scientific/Statistical languages | r , matlab |
Shell scripting | bash |
Styling | css |