Demonstration of Custom Syntax Highlighting

This page contains information regarding the Custom Wikitext Syntax Highlighter that is used in the Toaru Majutsu no Index Wiki's source editor mode.

Original Source

Original JS scripts were sourced from the Wikia Github Repo. The scripts which are specific to wikitext syntax highlighting in the source editor are as follows:

The above scripts have been modified and are in use on the Toaru Majutsu no Index Wiki.

Location of Code

How the Code Works

The highlightBlock function is the main function that splits up the text in the source editor and applies the predefined highlighting colors.

  • It does this by parsing through the text, character by character, until it finds a key token that indicates the start of a highlight block e.g. {{ and [[.
  • The function then uses a series of if, else and switch statements to determine particular block of code it has found and applies the chosen color for that specific scenario which are defined in the initLightThemeColors and initDarkThemeColors functions.
  • The function continues to apply the chosen color highlighting as it parses through the text until reaches either another key starting token or the corresponding end token for the block of code it is currently highlighting e.g. }} and ]].
  • This process continues until it parses through the entirety of the text
  • The highlighting will adjust itself as you type, delete, insert into or modify the text.

Modifying Colors

There are two sets of colors stored in functions:

  1. initDarkThemeColors
  2. initLightThemeColors

The Toaru Majutsu no Index Wiki currently uses the light theme colors in its source editor.

In each function, a list of variables are each assigned a color value to be referenced by the main highlightBlock function which does the actual highlighting of text. The variable names are easy to interpret and are given simple names depending on what block of code is intended to be highlighted. e.g wikilinkColor for highlighting standard wiki links.

Changing these colors will directly changes the color output of the syntax highlighting. In addition, more colors can be added to the functions for eventual reference by the highlightBlock function e.g. quickLinkTemplateColor and templateColor2.

Modifying Rules

The highlighting rules for the code can be easily modified by adding or changing the code in the i-else-switch statements of the highlightBlock function.

Highlighting colors can be changed to whatever you wish them to be but are defined in the initDarkThemeColors and initLightThemeColors functions.

New cases/scenarios can be added to the already existing cases as long as you know the structure of the code you wish to highlight. Regular expressions should be used to the identify the intended code and the scenario in which they appear. The structure of the new code should be similar to already existing cases:

  1. else if (/(N|n)ihongo/.test(text.substring(parserLocation, parserLocation + 7))
  2. || /(L|l)ink\scolor/.test(text.substring(parserLocation, parserLocation + 10))) {
  3. // Template:Nihongo or Template:Link color
  4. writeText('{{', syntaxHighlighterConfig.templateColor2 || color);
  5. highlightBlock(
  6. syntaxHighlighterConfig.templateColor2 || color,
  7. templateBreakerRegex
  8. );
  9. }

The addition of new rules are limited to the key tokens the parser function searches for; as they are predefined using a complex regular expression. In the above code, templateBreakerRegex contains the end token that is being searched for.

See Also

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