From MediaWiki.org
Jump to navigation Jump to search
MediaWiki extensions manualManual:Extensions
Crystal Clear action run.svg

Release status:Extension status stable

ImplementationTemplate:Extension#type Parser function
DescriptionTemplate:Extension#description A wrapper for the highlight.js client-side syntax highlighter
Author(s)Template:Extension#username Aran Dunkley
Latest versionTemplate:Extension#version 1.1.0 (2015-06-21)
MediaWikiTemplate:Extension#mediawiki All versions
Database changesTemplate:Extension#needs-updatephp No
LicenseTemplate:Extension#license GPL
Download Organic Design

Translate the HighlightJS extension if it is available at translatewiki.net

Check usage and version matrix.

This extension is a drop-in replacement for the GeSHi syntax highlighter extension. It does exactly the same thing, but instead of using GeSHi to do the highlighting on the server-side, it uses the client-side JavaScript highlighter from highlightjs.org. I've included a few of the most popular languages in the extension bundle, but you can download more from the main site, it supports over a hundred languages!


1. First download the extension:

  • Source code on github:
MediaWiki 1.25+: https://github.com/OrganicDesign/extensions/tree/master/MediaWiki/HighlightJS
Older MediaWiki versions: https://github.com/OrganicDesign/extensions/tree/MediaWiki-1.24/MediaWiki/HighlightJS
  • Download a copy of the extension from github (note this contains all the Organic Design extensions and you'll need to extract just the HighlightJS directory):
MediaWiki 1.25+: https://github.com/OrganicDesign/extensions/archive/master.zip
Older MediaWiki versions: https://github.com/OrganicDesign/extensions/archive/MediaWiki-1.24.zip

2. Clone or extract the HighlightJS folder into your wiki extensions folder.

3. Add the following code to your LocalSettings.php (at the bottom).

MediaWiki 1.25+:

wfLoadExtension( 'HighlightJS' );

Older versions:

require_once( "$IP/extensions/HighlightJS/HighlightJS.php" );


Code-blocks are created in the same way as the existing GeSHi one where the code-block is surrounded by a source tag with a language attribute as shown in the following example.

<source lang="js">
console.log('Some JavaScript code');

The colour theme can be set using the $wgHighlightJsStyle global variable which by default is empty which means to use the Organic Design code colours. You can set this to any of the sixty or so styles that you can see in the highlight/styles directory (don't include the ".css" in the setting).

Some wikis including this one now use the syntaxhighlight tag instead, so if your wiki already has existing code-blocks that use a different tag, you can set the tag that the HighlightJS extension uses with the $wgHighlightJsMagic global variable.

Example configuration options:

wfLoadExtension( 'HighlightJS' );
$wgHighlightJsMagic = 'syntaxhighlight';
$wgHighlightJsStyle = 'tomorrow-night-bright';