Installation

Importing the script

To use Highlight-js, you need to import it into your script. You can listen for the dev.highlight event using mw.hook.

// register the hook before the import to avoid race conditions
mw.hook('dev.highlight').add(function(hljs) {
    // hljs is a shortcut to window.dev.highlight
});
importArticle({ type: 'script', article: 'u:dev:MediaWiki:Highlight-js.js' });

The script creates a window.dev.highlight (internal alias hljs within the hook).

Loading languages

The library object has the following methods for loading languages:

hljs.loadLanguages • hljs.loadLanguage (function)

Accepts a string/array of language name/alias(es).

Loads the language component(s) and returns a Deferred event to use.

Passes window.dev.highlight as an argument when resolved.

hljs.loadAllLanguages

Loads all language components in the library.

Returns a Deferred event that resolves with hljs as the argument.

hljs.listLanguages (function)

Returns an array of language component names that have been loaded.

hljs.registerLanguage (function)

Internal method used to register/configure new language components.

hljs.loadedLanguage (function)

Accepts a string indicating the language name/alias.

Returns a boolean indicating whether its configuration has loaded.

Library data and validation

The following object methods/members are used for library validation and data retrieval:

hljs.registry (object)

Registry of languages, aliases and styles for library validation.

Contains the following keys:

• languages - language codes that are available in the library
• aliases - dealiasing object for language aliases
• styles - object mapping style names to titles

hljs.canonicalName (function)

Accepts a string for a language name/alias.

Returns the canonical language name if valid, or undefined.

hljs.getLanguage (function)

Accepts a string indicating the language name/alias.

Returns the object for the language component configuration.

hljs.validLanguage (function)

Accepts a string indicating the language name/alias.

Returns a boolean indicating whether it is valid.

Highlighting functions

The following methods are used for highlighting when language components have loaded.

hljs.highlight (function)

Main function - accepts a language name and string value to highlight.

Arguments: (name, value, ?ignore_illegals, ?continuation)

It generates an object with following keys.

• value - highlighted text
• language - language name, dealiased
• relevance - count of highlighted identities

You need to have hljs.loadLanguage(name) first!

hljs.highlightBlock (function)

Main function for DOM elements - accepts a DOM node.

Arguments: (block) - block of code

Expects language name as a class name, or nohighlight.

Highlights the block and attaches some object keys to the block variable.

You need to load the language first!

hljs.highlightAuto (function)

Computes the language of highest relevancy.

Accepts text and an optional language subset.

Arguments: (block)

Returns the hljs.highlight object for that language.

You need to load all the languages first!

hljs.initHighlightingOnLoad (function)

Highlights all plain code blocks in article content automatically.

Also highlights code when new articles or content have loaded.

NB: This method doesn't use hljs.highlightAuto.

hljs.initHighlighting (function)

Highlights all plain code blocks in article content once.

Arguments: ($content) - content as JQuery (usually mw.util.$content)

hljs.useTheme (function)

Accepts a style name and sets it as the currently used style.

Language support

The following languages are supported:

Themes

The following themes are supported: