FANDOM


SyntaxHighlight-Comparison

Wikitext with and without syntax highlighting (legacy)

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 colours to help a reader identify which parts do what.

It exists in three main forms - simple wikitext highlighting, CSS/JS/template/Lua page highlighting, and as a tag usable on articles.

Editor highlighting

Simple wikitext highlighting

Wikitext is the main building block of articles across Fandom, but it can often be hard to comprehend what you're seeing at a glance, especially on more complex pages.

Syntax highlighting takes this code and adds blocks of colour behind the text.

UCP colors

SyntaxHighlight-Wikitext

Wikitext highlighting in the UCP

In contrast to legacy, UCP colors typically vary by text color but have no actual background colors (a notable exception is for horizontal lines, which have variable background colors). Further, links adopt the link color set by Theme Designer, and internal links have underlined link destinations.

The main text colors are:

  •  dodger blue  = section headings, horizontal lines, bold and italic text, general wikitext such as lists, and link anchors (e.g. [[Link#Anchor|Text]])
  •  japanese laurel  = tags and HTML entities
  • variable purple color = templates
  • variable grey color = comments
  • variable red color = magic words, closing tags without an opening tag

Legacy colors

SyntaxHighlight-WikitextDark

Wikitext highlighting on a dark theme (legacy)

The main colors involved for dark theme wikis are:

  •  dark lavender  = section headings, horizontal lines, bold and italic text
  •  dark blue  = internal links
  •  transparent  = external links
  •  brown  = general wikitext
  •  dark red-violet  = tags
  •  olive  = templates and HTML versions of special characters

The main colors involved for light theme wikis are:

  •  blue-violet  = section headings, horizontal lines, bold and italic text
  •  light blue  = internal links
  •  pale blue  = external links
  •  red  = general wikitext
  •  red-violet  = tags
  •  grey/brown  = templates and HTML versions of special characters

Code highlighting

CSS, JS, infobox template, and Lua module pages have a more advanced syntax highlighter active.

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

User preference

If you do not wish to use syntax highlighting, then simply visit the 'Editing' tab in your preferences and tick the "Do not show syntax highlighting in "Source mode" option. This will switch off all forms of syntax highlighting, including on CSS and JS pages.

Note: This preference is not available in the UCP.

Article highlighting

The <syntaxhighlight> tag can be used on articles to syntax highlight sections of code for readers. 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%;
}

Note that the syntax highlighting does not work when the page has been shared. If you're reading this on a wiki other than Community Central, click here for a live example.

See also

Further help and feedback

Community content is available under CC-BY-SA unless otherwise noted.