Skip to main content

Command Palette

Search for a command to run...

Add syntax highlighting support for additional languages in the Caffein Ghost theme

Updated
1 min read
M

My name is Michael Lehmann. I'm a developer, architect, technical team lead and occasional speaker. I work for Zühlke Engineering AG as a Lead Software Architect aiming to help my customers and team mates to design and develop software. I specialised in developing distributed systems with micro-service architectures and modern web technologies.

I just set up my new Ghost blog and recognized the missing support for the C# programming language. C# is my main programming language and plan to write some posts about my work with it.

With that in mind, I searched for a way to add the syntax highlighting support for additional languages. I'm using the Caffein Theme for the Ghost platform. The theme uses PrismJS to introduce syntax highlighting for code snippets.

Prism has a plugin called "Autoloader". Autoloader will dynamically load the language used in code blocks. I did not want to make big changes to the theme, but Luckily Ghost allows us to inject code on the index page. Add the following code to the site footer code injection:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/autoloader/prism-autoloader.js"></script>
<script>Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/'</script>

With that change, the syntax highlighting should now also work for languages like C# by specifying the language on the markdown code block.

More from this blog

U

Untitled Publication

16 posts