1

:bookmark: This guide explains how to configure which programming languages are available for syntax highlighting in Discourse.

:person_raising_hand: Required user level: Administrator

Syntax highlighting enhances readability in code blocks by applying formatting based on the programming language. You can customize the languages available for syntax highlighting in Discourse.

Configuring the highlighted_languages site setting

To configure the list of programming languages for syntax highlighting:

  1. Navigate to the Admin panel.
  2. Go to Settings.
  3. Search for the highlighted_languages site setting.

Screenshot of highlighted_languages site setting

In this setting, you can define which languages will be available for syntax highlighting. Enter the names of the languages you want to support, separated by commas.

Adding support for additional languages

If your desired language is not bundled with highlight.js, you need to add it manually. Below are the steps to achieve this:

  1. Locate a module for your language: Find a highlight.js module that supports the language you want to add. For example, to add Solidity, you can use the highlightjs-solidity package.
  • Solidity: https://github.com/highlightjs/highlightjs-solidity
  • Supercollider: https://github.com/highlightjs/highlightjs-supercollider
  1. Integrate the module using a theme component:
  • Obtain the HighlightJS script for the desired language.
  • Create a new theme component in Discourse.
  • Add the script to the theme component to ensure it integrates correctly.

Last edited by @SaraDev 2024-07-16T22:41:30Z

Check documentPerform check on document:
6 Likes
2

I want to add solidity, a language that is not bundled with highlight.js. It is provided in this package: GitHub - highlightjs/highlightjs-solidity

I’m not sure how to do this. I’ve added it to the discourse settings. Is it going to find the package for me and take care of everything, or do I have to put this extra javascript package somewhere? I’ll appreciate some guidance :slight_smile:

1 Like
3

I’m also interested in this, to support syntax highlighting of the supercollider language via GitHub - highlightjs/highlightjs-supercollider

1 Like
4

Bump. If we want to add syntax highlighting support for languages not already in highlight.js, is there any way to add this directly eg via a theme component, or do we need to get the upstream highlight.js people to accept a PR with the additional syntax?

I’m asking as there is an fairly esoteric pair of languages Archetype Description Language (ADL) and Archetype Query Language (AQL) which the owners of discourse.openehr.org would like to be syntax highlight-able. They have technical capability to build a parser/highlighter, they just need to know how to make it work in a Discourse.

3 Likes
6

It’s totally doable as a theme component! Once you get the HighlightJS script ready ping me here and I can help you build the theme-component .

3 Likes
7

Thanks @Falco ! I will get the script built and will post back when ready.

3 Likes