1

How To Change the Text Color in Discord

Posted by Robert Hayes on May 28, 2019

Discord is the world’s leading voice and text chat server system, used for anything and everything under the sun. People run their online game guilds through Discord, they communicate while playing tabletop games online with Discord, they even have business conferences using Discord. Whether you’re a gamer or not, Discord is an incredibly valuable tool for communication between small and large groups of people.

One thing that Discord doesn’t support particularly well, however, is a vibrant and colorful text chat experience. There’s text chat, but there are no built-in color commands and, at first glance, no way to do anything “fancy” with your text. Plain text can get very boring very quickly – but in fact there are ways to change your text color. In this article I’m going to show you how to get bold colors in your Discord text chats.

How it Works

The key to this method of adding color to text lies in the fact that Discord uses Javascript to build its interfaces, along with a theme known as Solarized Dark and a library called highlight.js. That is, when you are logged in to your Discord server, the page you see is actually being rendered by a series of rather sophisticated Javascript programs, including highlight.js. And although the native Discord user interface provides no support for colorizing your text, the underlying Javascript engine, running the highlight.js script, does. By inserting what amounts to snippets of code into your text chat, you can change the color of the words printed out in everyone’s text chat window.

The basic concept to understand is that in order to change the color of a given piece of text, you need to encapsulate that text in a code block. This is a three-line block of text with your text as the middle block. The first line of the code block should be three ” ` ” characters, followed by the code phrase that tells the Solarized Dark theme what color to display. Then the second line needs to be your text, and the third line of the code block should be three more ” ` ” characters. So a sample code block would look like:

“`CSS

This text would appear to be green if you put it in Discord.

“`

There are two basic ways to enter text this way. The first way is to have a text file on your computer with the various codes for the various text colors that you can access in this fashion, and cut and paste the segments you want to use. Another way is to directly enter the code block into the Discord chat engine line by line. Type one line, then hit “shift-Enter” to create another line without actually sending the message to Discord. Type the second line, and hit shift-Enter again. Then type the third line, and hit Enter, and the entire block will be sent at once and will display your text.

There are some limitations on this method. One, you have to do it for every line of text you want to colorize – you can’t just turn a color on or off. Two, your text will appear in a box in the Discord server. And three, special characters like ‘ and punctuation marks often won’t be colorized. For example:

“`CSS

I’m very special!

“`

will display as

Note that the “I’m very special!” text isn’t all green, and that it’s inside a box.

The highlight.js codes give access to seven new colors in addition to the default grey. Here are the codes, and samples of their appearance. Note that the first code needs to have its mouth washed out with soap.

Plain grey (but in a box)

“`brainfuck

Sample text

“`

Green (sort of)

“`CSS

Sample text

“`

Cyan

“`yaml

Sample text

“`

 

Yellow

“`HTTP

Sample text

“`

Orange

“`ARM

Sample text

“`
(Note that here’s an example of the behavior being flaky – only the first word colorized, and I wasn’t able to get it to colorize the whole line.)

Red

“`excel

Sample text

“`

(Another flaky one.)

Blue

“`Elm

Sample text

“`

(Not only would this one not color the whole line, though I was able to do it previously, it did the wrong color. Sigh. Well, this is flaky stuff.)

Advanced Techniques

There are some other ways to get your text to display in colors using the same basic technique, but in a more advanced way. The reason all of this works (sort of) is that these formats are intended for displaying code blocks when a developer is writing a program. The first text after the “` tells highlight.js which scripting language it should be formatting, and there are actually some explicit ways to cast colors directly in a line. Here are some of the languages you can use, and the ways to force color. Experiment with them and you’ll soon find yourself writing colorful text mesages all the time.

For more information on this, check out Highlight.js.org or join the Discord server Discord Highlight.js.

For even more advanced users, Discord also allows you to add embeds and webhooks as messages. These can be used to display colored blocks and also support markdown text. You can see just how this feature works by heading over to Discord Webhook.

We’ve got plenty more Discord resources for you!

Need to ban a user? Here’s how to do an IP ban in Discord.

Want to quote someone? We’ve got a guide to quoting someone on Discord.

Want to cross out or strike out text? We’ve got a tutorial on crossing out and striking out text in Discord.

Bots add a lot to the Discord experience – here’s our walkthrough for adding bots to your Discord server.

Want to share your screen with other users? See our guide to sharing your screen in Discord.

One thought on “How To Change the Text Color in Discord”

Jackie says:
Hi! Just to note, “`arm“` produces red for ‘sample’ (and, e.g., ‘text’, ‘number’) probably because they’re reserved words, but only at the beginning of a line. If you begin a line with a non-keyword (e.g. ‘spaniard’), it’s green. Numbers appear in blue and ‘and’ appears in green. If you have anything else appearing anywhere else (e.g. ‘text’ as the second word), it’s grey.

Excel is a similar case; ‘text’ is a reserved word, like ‘sum’, ‘if’, ‘max’, etc.

Elm highlights the first word in blue, but only if its first letter is lowercase; any word starting with an uppercase letter is yellow, with priority over the blue coloration.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.