Help:Syntax highlighting

This extension is enabled by default on Fandom.
An image showing two blocks of wikitext, with and without syntax highlighting.

Wikitext with and without syntax highlighting

Syntax highlighting is a feature designed to improve readability of code on Fandom. It takes what is written in the editor and highlights the various types of code in different colors to help a reader identify which parts do what.

It exists in three main forms: wikitext highlighting, CSS/JS/Portable Infobox/Module page highlighting, and as a tag usable on pages.

Editor highlighting

Turning it on and off

How to turn syntaxhighlight on or off depends on which source editor you're using. In all editors, it is located in the top toolbar, but at different positions.

Wikitext highlighting

An screenshot of this page being edited, using syntax highlighting on its wikitext.

Wikitext highlighting

When using a source editor, you edit the contents of a page using wikitext, but it can often be hard to understand what you're seeing at a glance, especially on long or complex pages. Syntax highlighting takes this problem and solves it by adding color to the words and symbols across the editing area.

Highlighted text typically varies by text color but have no actual background colors (some exception is for horizontal lines, which have variable background colors).

The main text colors are:

  • dodger blue = section headings, horizontal lines, bold and italic text, general symbols such as the beginning of lists, and link anchors (e.g. [[Link#Anchor|Text]])
  • japanese laurel = tags and HTML entities
  • red = magic words, closing tags without an opening tag, parser functions
  • orange = template parameters
  • purple = templates
  • pink = tables
  • gray = comments
  • wiki link color = links
    • Links adopt the link color set by Theme Designer, and internal links have underlined link destinations

Note that syntax highlighting will also indirectly highlight errors on the page: Internal links without closing sets of brackets will highlight all following characters and lines, for example.

If you are using the classic source editor (also called 2010 source editor), you can open the "Advanced" tab and press the pencil icon with a gear, which will open the syntax highlighting preferences:

An screenshot of the syntax highlighing preferences inside the source editor.

Syntax highlighting preferences.

  • By clicking on opening brackets ({, [ and (), both opening and closing brackets will have a background. You can toggle this with "Enable bracket matching".
  • Line numbers show which line some text belongs to. You can toggle this with "Show line numbers".
  • Lines wrap and avoid horizontal scrolling. You can toggle this with "Wrap lines".
  • You can highlight Selected lines by toggling the "Highlight the active line" option.
  • Special characters, usually invisible to the casual reader, are shown inside the editor. You can toggle this with "Show special characters".
  • Template parameters can be folded, similar to the code editor, by toggling the "Enable folding of template parameters" option.
  • Template names, magic words and links show a list for autocompletion. You can toggle this with "Enable autocompletion".

The source editor mode of the visual editor (also called 2017 source editor) has only bracket matching, autocpmpletion, and line numbering, but you can't toggle these off.

Both editors also have a colorblind mode, which can be accessed by going to the "Editing" tab of your preferences. This changes the colors of symbols, tags, templates and template parameters to a color scheme friendlier to clolorblind people.

If you want to read more about wikitext highlighting, you can go to the help page on MediaWiki.

Code highlighting

Pages for CSS, JS, infobox templates, and Lua modules have a different syntax highlighting.

Beyond simple readability improvements, the highlighting will also help you spot code issues - helping to prevent JavaScript errors, for example.

The <syntaxhighlight> tag

The <syntaxhighlight> tag can be used to syntax highlight sections of code for readers. This is especially useful on template or other documentations. A rough list of supported languages can be found on MediaWiki.org.

For example, CSS highlighting: 

<syntaxhighlight lang="css">
.class {
    font-size: 110%;
}
</syntaxhighlight>

creates: 

.class {
    font-size: 110%;
}


You can enable line numbers using the line attribute: 

<syntaxhighlight lang="css" line>
.class {
    font-size: 110%;
}
</syntaxhighlight>

creates: 

.class {
    font-size: 110%;
}


The start number can be defined by adding the start attribute: 

<syntaxhighlight lang="css" line start="12">
.class {
    font-size: 110%;
}
</syntaxhighlight>

creates: 

.class {
    font-size: 110%;
}


One or several lines can be highlighted using the highlight attribute: 

<syntaxhighlight lang="css" line start="12" highlight="2,5">
.tomato {
    color: red;
}
.banana {
    color: yellow;
}
</syntaxhighlight>

creates: 

.tomato {
    color: red;
}
.banana {
    color: yellow;
}


The update to MediaWiki 1.43 in 2025 introduced a copy option, allowing users to click a button to copy the code from the box to their clipboard. 

<syntaxhighlight lang="css" copy>
.banana {
    color: yellow;
}
</syntaxhighlight>

creates: 

.banana {
    color: yellow;
}


Syntaxhighlight also has an inline option: 

<syntaxhighlight lang="html" inline><div>A <span class="banana">banana</span> is a fruit.</div></syntaxhighlight>

creates:

<div>A <span class="banana">banana</span> is a fruit.</div> 

Let's use the CSS class <syntaxhighlight lang="css" inline>.banana</syntaxhighlight> here.

creates:

Let's use the CSS class .banana here.


For all options and its syntax see the SyntaxHighlight extension page on MediaWiki.

See also

Further help and feedback