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 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
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.
- 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
- 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.
- 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.
There are two sets of colors stored in functions:
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.
The highlighting rules for the code can be easily modified by adding or changing the code in the i-else-switch statements of the
Highlighting colors can be changed to whatever you wish them to be but are defined in the
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:
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.