Prism-Wiki

Other Languages

• 简体中文

Introduction

Prism-Wiki is a code block highlighting gadget for MediaWiki sites, written by Bhsd. It is primarily based on Prism and uses WikiParser-Node to improve Wikitext highlighting.

Prism-Wiki can also be used to enhance Prism's support for Wikitext highlighting in non-MediaWiki browser environments or Node.js environments, see Node.js Usage. An example of Node.js usage can be found from the <syntaxhighlight> tag rendered by WikiParser-Node.

MediaWiki Gadget

Usage

Add the following code to your personal JS page:

mw.loader.load('//cdn.jsdelivr.net/npm/prism-wiki');

Or

mw.loader.load('//unpkg.com/prism-wiki/dist/main.min.js');

All code blocks with specified languages will be automatically highlighted, while those without specified languages can be double-clicked to manually input the language and highlight.

Configuration

Add the following code to your personal JS page before loading the gadget as needed:

window.Prism = window.Prism || {};
Prism.theme = ''; // Theme name, optional
Prism.pluginPaths = []; // Relative paths of plugins, optional
Prism.CDN = 'https://cdn.jsdelivr.net'; // jsDelivr endpoint, optional
Prism.reHighlight = true; // Re-highlight code blocks highlighted by Extension:SyntaxHighlight, optional

Theme

All available Prism themes can be found here.

Relative Paths of Plugins

All available Prism plugins can be found here. The plugin paths should be specified relative to plugins/. Note that some plugins include both JavaScript and CSS files, for example, to load the match-braces plugin:

Prism.pluginPaths = [
	'match-braces/prism-match-braces.min.js',
	'match-braces/prism-match-braces.min.css',
];

This gadget always loads the autolinker, copy-to-clipboard, inline-color, line-highlight, line-numbers, and show-language plugins, so there is no need to add them manually.

CDN

By default, this gadget loads the Prism library from fastly.jsdelivr.net, but you can specify other jsDelivr CDN, such as cdn.jsdelivr.net.

Re-highlight <syntaxhighlight>

By default, this gadget does not touch code blocks that have already been highlighted by Extension:SyntaxHighlight. If you want to re-highlight them, set Prism.reHighlight to true or double-click the code block you want to re-highlight.

Wikitext Markup

Language

The lang="..." attribute or the lang-.../language-... class of a <pre> or <code> tag specifies the language of the code block:

<pre lang="wiki">[[Foo]]</pre>

or

<pre class="lang-js">'bar'</pre>

or

<pre class="language-css">#baz {}</pre>

Line Numbers

To enable line numbers, specify the language of the code block using the lang="..." attribute or add the line-numbers or linenums class to the <pre> tag:

<pre lang="wiki">[[Foo]]</pre>

or

<pre class="lang-js line-numbers">'bar'</pre>

or

<pre class="language-css linenums">#baz {}</pre>

Line Highlight

Please refer to the line-highlight plugin.

Node.js Usage

Installation

npm install prism-wiki
# peer dependencies; wikilint can be replaced by wikiparser-node
npm install prismjs wikilint

Example

const Prism = require('prismjs'),
	Parser = require('wikilint'),
	registerWiki = require('prism-wiki').default;

registerWiki(Prism, Parser);
Prism.highlight('[[Foo]]', Prism.languages.wiki, 'wiki');