Extension:Highlightjs Integration

The Highlightjs Integration extension is a drop-in replacement for the SyntaxHighlight extension. Instead of using Pygments as server-side highlighter, it uses highlight.js a client-side JavaScript highlighter. It makes the wikis which use a lot of syntax highlighting faster.

Usage
Once installed, you can use the  or the   tags on wiki pages:

lang
If no  attribute is defined, the highlight.js library tries itself to determine the language.

The  attribute defines what lexer should be used. This affects how this extension highlights the source code.

The highlight.js library supports 197 languages. Specifying an invalid or unknown name will make the highlight.js library unable to highlight the source code.

inline
The attribute indicates that the source code should be inline as part of a paragraph (as opposed to being its own block):

Style
The  library supports color themes.

To change the theme, edit the file

Tags
By default you can use the  or the   tags to highlight source code.

To add other tags or remove some, edit the file  and modify the following block:

Mapping between languages
If you used SyntaxHighlight, you will find some languages have different names in the highlight.js library and some have missing.

To map a language name to an existing language in the highlight.js library, edit the file  and modify the following block:

highlight.js
This extension is bundled with highlight.js version 11.7.0 and the 36 common languages.

Update HighlightJS
If you want a different version of the highlight.js library or add / remove languages:
 * 1) go on the download page of the highlight.js website and download a custom package.
 * 2) remove or rename the   folder.
 * 3) unarchive the custom package in  . You should have a fresh new   folder.

To use the bundled  script and not the one from CDNJS:

hljs.configure({  cssSelector: 'pre.code2highlight, code.code2highlight, pre.mwcode' });
 * replace the content of the  file by the following code

hljs.highlightAll;

"ResourceModules": { "ext.HighlightjsIntegration": { "scripts": [ "highlight/highlight.min.js", "init.js" ]   } },
 * update the  file by adding   in the scripts to load in this extension

Adding external libraries to handle additional languages
Some languages are not available in  but you can add external libraries to handle additional languages. Here is the list of all supported languages, the ones with a package name are external which need to be installed.

Installation of the T-SQL language grammar for highlight.js:

{{Codesample // ...   "ResourceModules": { "ext.HighlightjsIntegration": { "scripts": [ "highlight/highlight.min.js", "highlight/tsql.min.js",     // add the javascript file for the T-SQL language "init.js" ],           "styles": [ "custom.css", "highlight/styles/vs2015.min.css", "ssms.min.css"              // add the css file for the T-SQL language if any ] }}
 * 1) download the   and   from the highlightjs-tsql GitHub repo
 * 2) copy the files to the   folder
 * 3) update the   file
 * name = extensions/Highlightjs_Integration/extension.json
 * lang = js
 * code = {

Bug Uncaught SyntaxError: unterminated regular expression literal
This is a know bug with highlight.js version 11.5.1, it is not an issue with version 11.7.0 anymore.

The load of the  script in this extension raises a syntax error. As a workaround, the  script is loaded from the CDNJS url instead of the file provided with this extension.