You are now on my Technical Blog. My other sites: Personal Blog - Genealogy Blog - Genealogy Site

DLMax Max Westen's ramblings on OSX and PHP

UPDATE: This add-on is for Statamic V1

Highlight.js add-on on Github


This add-on adds Highlight.js v 9.0 code highlighting to your pages.
All codeblocks are color-coded/highlighted according to the selected theme.


Clone or Copy the files to their destination

Clone this project on your system:

cd webfolder/_add-ons
git:// highlight

Or download the project and add the contents of archive to the _add-ons/highlight folder.

Add the highlight init code to your head

Open the theme file layout (for example) _themes/london-wild/layouts/default.html
Add the following code in your <head> section:

{{ highlight:head }}

This displays the highlight.js in the default theme.
You can also select one of the added themes that you can find in the _add-ons/highlight/highlight/styles folder; for example the Sunburst theme:

{{ highlight:head style="sunburst"}}

If you like you can add the code just before your body close tag instead of in your <head>. This is a matter of preference.


When codeblocks are used (1 tab or 4 spaces) Highlight.js tries to guess what code is used. (You can inspect the class on the generated <pre><code class="php"> … </code></pre> codeblock to see how it was interpreted.)
If the autodetection didn’t work out correctly or you just want control over the rendering, just wrap the code in a manual codeblock and add the language to the code class.
See for more information the Highlight.js documentation.