Fandom Developers Wiki
Advertisement

SyntaxHighlight is a forked version of Syntax highlighter script made by Remember the dot on MediaWiki.org.

It brings back old syntax highlighting available on Fandom's legacy platform and makes it available in source editor, also referred to as WikiEditor or 2010 wikitext editor.

Installation

Usage

In order to use this script you have to make sure that you're using 2010 editor by going to your editor preferences and changing preferred editor to "Source editor".

SyntaxHighlight (preference)

"Source editor" must be your preferred editor

Then, you have to disable editor's built-in syntax highlighter by clicking the marker icon in the editor's toolbar.

SyntaxHighlight (toolbar)

Make sure that marker icon is not active

Configuration

Script supports various customization options to control both its appearance and behavior.

Colors

Script is configured to fit in all Fandom wikis with all color schemes using the same set of colors as on legacy Fandom platform:

Light wikis

  • bold or italic#e4e5f3for syntax$boldOrItalicColor
  • comments#f8dbdafor syntax$commentColor
  • entities#e8ebdafor syntax$entityColor
  • external links#dbecebfor syntax$entityColor
  • headings#e4e5f3for syntax$headingColor
  • hr syntax#e4e5f3for syntax$hrColor
  • list and indents#f8dbdafor syntax$listOrIndentColor
  • parameters#f5e0d8for syntax$parameterColor
  • signatures#f5e0d8for syntax$signatureColor
  • tags#f6dde9for syntax$tagColor
  • tables#f0ebdbfor syntax$tableColor
  • templates#f0ebdbfor syntax$templateColor
  • internal links#d9eaf6for syntax$wikilinkColor


Dark wikis

  • bold or italic#44466dfor syntax$boldOrItalicColor
  • comments#4d1a19for syntax$commentColor
  • entities#474d23for syntax$entityColor
  • external links#244d491for syntax$entityColor
  • headings#44466dfor syntax$headingColor
  • hr syntax#44466dfor syntax$hrColor
  • list and indents#4d1a19for syntax$listOrIndentColor
  • parameters#66331efor syntax$parameterColor
  • signatures#66331efor syntax$signatureColor
  • tags#662946for syntax$tagColor
  • tables#5e5129for syntax$tableColor
  • templates#5e5129for syntax$templateColor
  • internal links#245477for syntax$wikilinkColor


Custom colors

It is, however, possible to customize your wiki's highlighting options by editing window.syntaxHighlighterConfig object and adding it to MediaWiki:Common.js or MediaWiki:Fandomdesktop.js page on your wiki. Following keys are accepted:

window.syntaxHighlighterConfig = {
    boldOrItalicColor: '',
    commentColor: '',
    entityColor: '',
    externalLinkColor: '',
    headingColor: '',
    hrColor: '',
    listOrIndentColor: '',
    parameterColor: '',
    signatureColor: '',
    tagColor: '',
    tableColor: '',
    templateColor: '',
    wikilinkColor: ''
};

Example configuration:

window.syntaxHighlighterConfig = {
    externalLinkColor: '#FFCC66',
    wikilinkColor: '#E6FFFF'
}

Other options

You can learn more about other customization options available in this script on Syntax highlighter documentation.

Original script

Original source code of this script is available on page User:Remember the dot/Syntax highlighter.js on MediaWiki.org and was created by Remember the dot and other contributors. It is used on MediaWiki.org and other Wikimedia Foundation wikis as a gadget.

A version of the original upon which this script has been based can be found in the top comment on MediaWiki:SyntaxHighlight.js.

If you think you found a generic issue with this script that is not related with it running specifically on Fandom, please consider making an upstream report to Remember the dot on original script's talk page.

Changes from the original

While this code aims at integrating the original script into Fandom with minimal amount of changes, there are some modifications made to this script to assure it's working correctly on Fandom and improve its performance. These include:

  • Added support for i18n-js library to assure easy and user-friendly translation updates.
  • Some performance improvements (mostly using constants instead of variables where these are not necessary).
  • Added mechanism automatically applying colors configuration for light and dark-themed wikis to reflect design known from the old platform.
  • Extended default configuration for source tags by adding support for <infobox> and <templatedata> tags.
  • Extended default configuration for void tags to solve issue with unclosed <br> tags.

Possible issues

Although this script should work as-is on all Fandom wikis, some issues may occur:

  • Inappropriate wiki theme detection resulting in unreadable colors
    • This version of the script is using different wiki theme detection than the version used by Fandom on legacy platform, and it may result in incorrect behavior in some rare cases. If this happens to you, please leave a report on the talk page.
  • Script not loading showing error message
    • Unlike the version used by Fandom on legacy platform, this script has a default, stricter timeout configuration and throws an error message if this timeout is exceeded. If this happens to you, please apply custom timeout configuration of 150ms instead of 25.

External links

Text above can be found here (edit)
Advertisement