Configure which programming languages are available for syntax highlighting

[Discourse]

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

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 Config → Content → Posts and Topics.
3. Find the 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.

Related settings

There are two additional site settings related to syntax highlighting, found in the same area:

• default_code_lang — The default language applied to code blocks when no language is specified. Defaults to auto, which attempts to detect the language automatically.
• autohighlight_all_code — When enabled, applies syntax highlighting to all <code> blocks, even those without a language class specified. Defaults to off.

Adding support for additional languages

If your desired language is not bundled with highlight.js, you can add it via a theme component using the api.registerHighlightJSLanguage() plugin API. Below are the steps to achieve this:

1. Locate a module for your language: Find a highlight.js language definition that supports the language you want to add. For example:

• Solidity: https://github.com/highlightjs/highlightjs-solidity
• Supercollider: https://github.com/highlightjs/highlightjs-supercollider

2. Integrate the module using a theme component:

• Obtain the HighlightJS language definition for the desired language.
• Create a new theme component in Discourse.
• In the theme component’s JavaScript, use the plugin API to register the language:

  api.registerHighlightJSLanguage("languageName", languageDefinitionFunction);
  

• See Install a new language for Highlight.JS via a theme component for a complete example.

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

Check document

Perform check on document:

[elopio (Leo Arias)]

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

[yaxu (Alex McLean)]

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

[pacharanero (Marcus Baw)]

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.

[Falco]

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 .

[pacharanero (Marcus Baw)]

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

[putty (Derek Putnam)]

In the last week or two, I’ve noticed that the code highlighting doesn’t seem to be registering when it should. See here for an example. When I specify a language (java in the case above), it will apply the colors.

Here is another example for XML:

Get application roles as well as search for the roles

We have dozens of languages to be detected. I see the subtext under this setting says that too many can cause it to perform poorly, but I don’t think we added anything recently.