ChatTags is a mark-up parser for Special:Chat.

It allows users to add formatting to their in-chat messages. Such formatting includes the ability to add colors to their messages, change the font of their messages, alter the font size, alter the font weight, and the background of their messages.

This gives users the creative freedom to better express themselves while in chat.

Users are now able to bold important sections of their messages or even highlight them using colors and backgrounds instead of using all caps. They are also able to italicize quotes and what ever else they deem necessary.

Put together this script enhances chats of all purposes.


Additionally, if you would like to enable the image or youtube tag you will need to add the following line ABOVE the script import.

var chatags = { images: true, videos: true };


To use Chat Tags on your wiki after installation one must only wrap their text in the designated tags that you will find below. Chat Tags functions much like HTML in that it requires a beginning tag that shows where you wish to start formatting and an ending tag to show when to stop formatting. If you do not include both of these tags then your text will be ignored by the script.

Tags must end in the order that they start

[c="red"]This text will be red.[/c] -> This text will be red.

[c="#FF0000"]This text will also be red.[/c] -> This text will also be red.

[bg="red"]This text will have a red background.[/bg] -> This text will have a red background.

[b]This text will be bold.[/b] -> This text will be bold.

[c="red"][b]This text will be red and bold.[/b][/c] -> This text will be red and bold.


  • Text color
    • [c="<color code>"]<message>[/c]
  • Background color
    • [bg="<color code>"]<message>[/bg]
  • Font
    • [font="<font name>"]<message>[/font]
  • Code tag
    • [code]<message>[/code]
  • Bold text
    • [b]<message>[/b]
  • Italicize text
    • [i]<message>[/i]
  • Big text
    • [big]<message>[/big]
  • Small text
    • [small]<message>[/small]
  • Subscript
    • [sub]<message>[/sub]
  • Superscript
    • [sup]<message>[/sup]
  • Strike through
    • [s]<message>[/s]
  • Underline
    • [u]<message>[/u]
  • Image
    • Note: Leave the http:// off of the link
    • [img="<image>"]
  • Youtube
    • Note:
    • [yt="<video ID>"]


ChatTags is very much extensible and allows developers to easily add and remove tags as they see fit.

In order to add a tag you must add an entry to the tags object. To do this you must pick a name that has not been previously chosen. All default tags are listed above. After selecting the name for your tag you must then decide whether it is stand-alone or a pair.

A stand alone tag only require an opening tag (see: img, yt).

A pair tag requires both an opening a closing tag (see: c, u, bg).

After deciding the structure of your tag you must decide if you want it to accept a parameter or not. After deciding this you want to create your object entry. For example purposes we will be creating a user tag that turns their text color purple.

To add an entry we must do the following BELOW ChatTags import.

//... import ...
mw.hook('chatags.init').add(function() {
    chatags.tags['user'] = function(s,t) {        // S is the user string, T is the tag
        if (t.charAt(0) === '/') {                // We have been given the ending tag
            s = s.replace('[/user]', '</span>');
        } else {                                  // We have been given the opening tag
            s = s.replace('[user]', '<span style="color:purple">');
        return s;                                 // Return the user string for further parsing

Now, let's say that we want to let the user enter their own color, we'd need to do something like the following.

//... import ...
mw.hook('chatags.init').add(function() {
    chatags.tags['user'] = function(s,t) {
        if (t.charAt(0) === '/') {
            s = s.replace('[/user]', '</span>');
        } else {
            try {
                t = t.split(' ');
                s = s.replace('[user' + t[1] + ']', '<span style="color:' + mw.html.escape(t[1]) + ';">');
            } catch(e) { console.log(e) }
        return s;

When dealing with user input you must always use mw.html.escape() to escape the input to prevent script injection.

Text above can be found here (edit)
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+