Highlight HuGo templates using Highlight.js with additional styles for HuGo specific tokens.

{{ printf "Autodetect Hello %s -> %s" $World .}}
{{- /*  printf "ONE second line */ -}}
<div class="help"/>
{{ range $k, $v := hugo.Generator $ $.Method -}}
{{ site.Language.Label }}
{{ hugo.Sites.Pages }}

You don’t have to be that colorful. If you have a working setup, just add new scopes you want. Have a look at the Discourse examples and Hugo examples to see how it could look like.

Even without the new scopes you will immediate gain proper highlighted HuGo templates.

Requirements

The modules need Highlight.js v11.11.1 and are tested to work with v11.11.2.

Usage

Include the highlight.js library in your webpage or Node app, then load this module.

Replace LANGUAGE with the language name of the grammar you want to use.

Static website or simple usage

Load the module after loading highlight.js.

<script type="text/javascript" src="/path/to/highlight.min.js"></script>
<script type="text/javascript" src="/path/to/LANGUAGE.min.js"></script>
<script type="text/javascript">
   hljs.highlightAll();
</script>

Using a CDN

No CDN published version.

With Node or another build system

There’s no official node packages. But guess you can combine a node installation and our plugins. Have a look at the highlight.js source assets. Maybe these work for you. No complete setup instructions here for Node, Webpack, Rollup or Browserify.

Here’s an example for a simple node script:

global.hljs = require("highlight.js");
require("./extra/LANGUAGE/dist/LANGUAGE.min.js");
hljs.highlightAll();

Example

Enclose your code in <pre><code> tags and at best set the language with class="LANGUAGE". You may want to check out the word on auto detection

<pre><code class="hugho-html">
<title>{{ `{{.Title}}` }}</title>
</code></pre>

Extended use cases

• Use on Discourse
• Use with Hugo

Download

Packages can be downloaded from: Releases.

• Ready to use javascript grammars and prebuild highlightjs browser engines for Go and Hugo highlightjs-hugo-jsmodules.zip
• All Grammar sources to build your own custom Highlight.ja browser engine: highlightjs-hugo-extra-src.zip

Custom Highlight.js build

The modules works with the standard Highlight.js extra build system. Extract a source archive to highlight.js/extra. For details on building consult the Highlight.js documentation.

Keyword and Grammar library - h4h-lib

The shared library containing grammar and keyword definitions. Make sure it’s also in the extra folder.

This one is created based on Hugo’s (or Go) keywords and contains the token, regex part for the languages. It will be regularly updated, to contain the latest keywords.

With this one referenced from outside the grammar a custom Highlight.js build will pack it only once to the core. Saves around 10kB uncompressed in the final engine if both hugo-text and hugo-html are imported.