Extension:HighlightJS

MediaWiki extensions manual

File:OOjs UI icon advanced-invert.svg HighlightJS Release status: unmaintained
Implementation	Parser function
Description	A wrapper for the "highlight.js" client-side syntax highlighter
Author(s)	Aran Dunkley (Nadtalk)
Latest version	1.1.2 (2015-09-04)
MediaWiki	1.25+
Database changes	No
License	GNU General Public License 2.0 or later
Download	external source
Quarterly downloads
Public wikis using

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!

Installation

• <translate> <tvar name=1>Download the code</tvar> and place the file(s) in a directory called <tvar name=name>HighlightJS</tvar> in your <tvar name=ext>extensions/</tvar> folder.</translate>
• <translate> Add the following code at the bottom of your <tvar name=1>LocalSettings.php </tvar> file:</translate>

  wfLoadExtension( 'HighlightJS' );
  

• File:OOjs UI icon check-constructive.svg <translate> Done</translate> – <translate> Navigate to <tvar name=special>Special:Version</tvar> on your wiki to verify that the extension is successfully installed.</translate>

Usage

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

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

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';

See also

• highlight.js javascript syntax highlighter
• Related extensions:
  • Highlightjs Integration – another MediaWiki extension for syntax highlighter.
  • SyntaxHighlight – server-side syntax highlighter that uses Pygments.