Wrapped HighlightJS grammars in Discourse theme components.

{{ printf "discourse 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. Have a look at the Discourse Example and Hugo examples to see how it could look like.

Download

Packages can be downloaded from: Releases.

• Discourse theme components highlightjs-hugo-discourse.zip

  The archive contains all four theme components – packed ready for import into discourse.

Usage

• you must have Highlight.js configured in your Instance

• Download highlightjs-hugo-discourse.zip

• Extract to the downloaded archive to a folder of your choice. After extraction the folder contains the ready-to-import theme component archives – also zip files.

• login as admin to discourse and create a new theme component.

  • either import one of the archives extracted before

  or

  • select your archive, extract it and copy the content of the contained theme-initializer.gjs to the JS section of your new Theme component.

Standard Styles should already be active in your instance. To take advantage of the special scopes (eg _template variables or context have a look CSS class reference. Add these to

• your standard CSS
• the just created theme component
• to an own dedicated component just for styling.

Even without you will gain immediate effect of proper highlighted templates.

Discourse Requirements

The theme components are tested in virtual machines hosted on Windows 11 Professional

• Discourse Dev Container

  • Discourse 2026.6.0-latest
  • Ubuntu 26.04 Desktop
  • Hyper-V

• Install a DEV Environment on Windows 11¹

  • Discourse 3.6.0.beta3-latest (end Oct 2025)
  • Ubuntu 22.04
  • WSL

• References:

  • API mentioned here.
  • add language using theme component

Support

Use the issue tracker for feedback, issues, ideas…