User:Remember the dot/Syntax highlighter

English • català • Deutsch • español • français • Ido • українська • 中文

I've created a script that makes syntax stand out colorfully in the edit box. Unlike other syntax highlighter scripts such as wikEd, AceWikiEditor, and CodeMirror, this one:

Updates the highlighting automatically as you type.
Does not break the Undo and Redo buttons.
Does not break spellcheck.
Is compatible with most other scripts that affect the edit box.

Installation

Please be sure to read the "Known issues" section below before installing the script.

For end user if installed on wiki

If the syntax highlighter is available as a gadget on your wiki, go to your preferences and enable it.

For end user if not installed on wiki

If installation as a gadget is not available, add these lines to your common.js page:

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

For example, if the English Wikipedia did not provide the syntax highlighter as a gadget, you would add it to

https://en.wikipedia.org/wiki/User:Your_Username/common.js

For administrators of Wikimedia sites

On your wiki create the page MediaWiki:Gadget-DotsSyntaxHighlighter.js‎ with the code

mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

Then add to the page MediaWiki:Gadgets-definition‎ a new line

*DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js

and create the page MediaWiki:Gadget-DotsSyntaxHighlighter‎ with the text

[[mw:User:Remember the dot/Syntax highlighter|Syntax highlighter]]: Make syntax stand out colourfully in the edit box.

For administrators of non-Wikimedia sites

On your wiki's MediaWiki:Common.js page add the lines

 //syntax highlighter
 mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

add to the page MediaWiki:Gadgets-definition‎ a new line

* DotsSyntaxHighlighter[ResourceLoader]|DotsSyntaxHighlighter.js

and create the page MediaWiki:Gadget-DotsSyntaxHighlighter‎ with the text

[https://www.mediawiki.org/wiki/User:Remember_the_dot/Syntax_highlighter Syntax highlighter]: Make syntax stand out colourfully in the edit box.

MediaWiki 1.22 or later is required.

Known issues

Compatibility

The highlighter works best in the latest version of Firefox.
The highlighter works almost all of the time in the latest versions of Chrome, Microsoft Edge, Safari, and Opera, but does not work right with text written in certain scripts, notably Thai and Tibetan.
The highlighter does not work in Internet Explorer (their bugs are too severe). The highlighter does not even attempt to run if one of these web browsers is detected.
The highlighter is not compatible with some gadgets, browser add-ons, and other customizations.

Parsing

For performance reasons, the highlighter requires all tags to be valid XML. For example, make sure that if you start a  tag you end it with , and use   instead of  .
For performance reasons, the syntax highlighter can't handle '''apostrophe italic'' or ''italic apostrophe'''—it considers them invalid syntax. I suggest using 'apostrophe italic and italic apostrophe' instead.
<pre> tags created by putting a space at the beginning of a line are not highlighted. This is because the highlighter is not smart enough to tell when a space at the beginning of a line is simply whitespace inside a template.
Behavior switches such as __NOTOC__ are not highlighted.
External links created with {{fullurl:}} or templates are not highlighted. You will see [{{fullurl:My page}} external link] instead of [{{fullurl:My page}} external link].

Miscellaneous

The highlighter does not perform well when editing long articles and will automatically disable itself if it delays more than 20ms. If this happens, a message appears explaining what happened and suggesting how to work around it or increase the timeout.
The highlighter does not execute when uploading files.
The highlighter may override your user styles related to the editing textbox.

Customizing

Colors

It's easy to change the highlighter to use different colors or to not highlight certain syntaxes. The following color customizations are available:

defaultColor	for recognized syntax elements that don't have a specific color defined
boldOrItalicColor	`'''bold'''` `''italic''`
wikilinkColor	`[[wikilink]]`
externalLinkColor	`[http:// named external link]`, `[http://numbered-external-link.com]`, `http://bare-external-link.com`
headingColor	`==Heading==`, `;Small heading`
listOrIndentColor	`* unordered list`, `# ordered list`, `: indent`
signatureColor	`~~~~`
tableColor	`{\| table \|}`
templateColor	`{{template}}`
parameterColor	`{{{template parameter}}}`
hrColor	`----`
tagColor	`<tag>...</tag>`, `<tag/>`
commentColor	`<!-- comment -->`
entityColor	`&entity;`
backgroundColor	background color of the editing textbox
foregroundColor	color of text in the editing textbox

For example, to make wikilinks cyan and external links orange, put the following in your common.js (if you installed the highlighter as a gadget, omit the first two lines or your web browser will freeze):

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    externalLinkColor: "#FFCC66", //orange
    wikilinkColor: "#E6FFFF", //cyan
}

To not highlight a syntax, set its color to "". For example, to disable external link highlighting:

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    externalLinkColor: "",
}

To not highlight any syntax except those you explicitly want, set defaultColor to "" and set the color of each syntax you want to highlight. If you just want the usual color, set the color to "normal". For example, to only highlight tags:

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    defaultColor: "",
    tagColor: "normal",
}

Timeout

You can specify a timeout that replaces the default 20ms timeout. For example, if you're OK with sluggishness as you type and you want to disable highlighting only if it takes more than 30ms, put the following in your common.js:

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    timeout: 30,
}

If you installed the highlighter as a gadget, omit the first two lines or your web browser will freeze.

Non-wikitext tags

Several tags, such as <math> and <source>, do not use wikitext and consequently, no syntax is highlighted inside of these tags. You can customize the list of source-like tags by setting sourceTags to an array of tag names. For example, to disable syntax highlighting within the hypothetical <foo> tag in addition to the defaults, put the following in your common.js:

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    sourceTags: ["math", "syntaxhighlight", "source", "timeline", "hiero", "foo"],
}

Other tags, such as <pre> and <nowiki>, do not use wikitext but do process character entities (  for example). The list of nowiki-like tags is controlled by the nowikiTags property. For example, to highlight only character entities within the <abbr> tag, put the following in your common.js:

//syntax highlighter
mw.loader.load('//www.mediawiki.org/w/index.php?title=MediaWiki:Gadget-DotsSyntaxHighlighter.js&action=raw&ctype=text/javascript');

syntaxHighlighterConfig = {
    nowikiTags: ["nowiki", "pre", "abbr"],
}

In both examples, if you installed the highlighter as a gadget, omit the first two lines or your web browser will freeze.

Ignoring unclosed br and hr tags

To ignore unclosed   and <hr> tags that would otherwise turn the rest of the page pink, you can add the following to your common.js file. This will affect performance; the author recommends using the explicitly closed forms   and <hr/> instead.

syntaxHighlighterConfig = {
    voidTags: ["br", "hr", "BR", "HR"],
}

Site defaults

All properties that can be specified in the syntaxHighlighterConfig variable can also be specified in the syntaxHighlighterSiteConfig variable. syntaxHighlighterSiteConfig is intended for site defaults and syntaxHighlighterConfig for user preferences. Properties of syntaxHighlighterConfig take precendence over properties of syntaxHighlighterSiteConfig, and properties of syntaxHighlighterSiteConfig take precedence over builtin defaults.

For example, if your site does not have any MediaWiki extensions installed, you might want to remove support for source-like tags. To do so, add the following to the end of MediaWiki:Gadget-DotsSyntaxHighlighter‎:

syntaxHighlighterSiteConfig = {
    sourceTags: [],
}

Reporting bugs

Note: Remember to check whether the bug you want to report is already a known issue.

When reporting bugs to me, please include:

A detailed description of the problem.
A link to a page where the bug is visible, or a sample of wikitext that triggers the problem.
Your web browser's User-Agent information.
The MediaWiki skin you use.
A list of gadgets you have enabled.
A list of any custom JavaScript or CSS you have enabled.
A list of any web browser extensions you have enabled.

Source code

To reduce download time and because the ResourceLoader does not automatically minify scripts imported from other wikis, MediaWiki:Gadget-DotsSyntaxHighlighter.js itself is kept in minified form (by pasting the source code into jscompress.com and copying the result). The actual source code is available at User:Remember the dot/Syntax highlighter.js.

Overview of approach

This script creates a background div, named wpTextbox0, that is inserted behind wpTextbox1, the editing textbox. wpTextbox0 and wpTextbox1 are synchronized in style, and the background of wpTextbox1 is made transparent so that wpTextbox0 shows through. Then, blocks of text are added to wpTextbox0 as span elements. The text on the blocks is transparent, but the backgrounds of the blocks are colored. By using the same text in wpTextbox0 as wpTextbox1, any positioning anomalies from dynamically composed characters are eliminated. Because wpTextbox0 and wpTextbox1 are (theoretically) perfectly synchronized, the colored backgrounds appear to the user as though they have been added directly to wpTextbox1.

The text in wpTextbox0 is not actually added to the textContents of the span elements. Instead, it is added to the ::after pseudo-elements of each span using a dynamically generated CSS stylesheet. This avoids problems when trying to use the browser's find-in-page feature, because if textContent were used instead of CSS content, the browser would perceive both the real text in wpTextbox1 and the transparent text in wpTextbox0 to be on the page.