Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A guide to ANSI on Discord

A guide to ANSI on Discord

Discord is now slowly rolling out the ability to send colored messages within code blocks. It uses the ANSI color codes, so if you've tried to print colored text in your terminal or console with Python or other languages then it will be easy for you.

Quick Explanation

To be able to send a colored text, you need to use the ansi language for your code block and provide a prefix of this format before writing your text:

\u001b[{format};{color}m

\u001b is the unicode escape for ESCAPE/ESC, meant to be used in the source of your bot (see http://www.unicode-symbol.com/u/001B.html). If you wish to send colored text without using your bot you need to copy the character from the website.

After you've written this, you can now type the text you wish to color. If you want to reset the color back to normal, then you need to use the \u001b[0m prefix again.

Formats

Here is the list of values you can use to replace {format}

  • 0: Normal
  • 1: Bold
  • 4: Underline

Colors

Here is the list of values you can use to replace {color}:

Text Colors

  • 30: Gray
  • 31: Red
  • 32: Green
  • 33: Yellow
  • 34: Blue
  • 35: Pink
  • 36: Cyan
  • 37: White

Background Colors

  • 40: Firefly dark blue
  • 41: Orange
  • 42: Marble blue
  • 43: Greyish turquoise
  • 44: Gray
  • 45: Indigo
  • 46: Light gray
  • 47: White

Example

Let's take an example, I want a bold green colored text with the firefly dark blue background. I simply use \u001b[0;40m (background color) and \u001b[1;32m (text color) as prefix. Note that the order is important, first you give the background color and then the text color.

Alternatively you can also directly combine them into a single prefix like the following: \u001b[1;40;32m and you can also use multiple values. Something like \u001b[1;40;4;32m would underline the text, make it bold, make it green and have a dark blue background.

Result:

Background and text color

Raw message used:

```ansi
\u001b[0;40m\u001b[1;32mThat's some cool formatted text right?\u001b[0m
or
\u001b[1;40;32mThat's some cool formatted text right?\u001b[0m
```

ANSI Colors Showcase

The way the colors and different formats look like on Discord is shown here

ANSI Colors

Disclaimer

Note: The change has been brought to all stable desktop clients. Since syntax highlighting on mobile is far behind, ANSI is not supported on mobile as well. Refer to this gist for other syntax highlighting methods.

ANSI Colors Showcase

This is a small gist to show how I've made the picture showcasing the different ANSI formats above.

The \u001b is the unicode for ESCAPE/ESC, see http://www.unicode-symbol.com/u/001B.html. If you want to use it yourself without bots, then you need to copy paste the character from the website.


Example

\u001b[1;40;32mThat's some cool formatted text, right?

Color Names

\u001b[0;30mGray\u001b[0;0m
\u001b[0;31mRed\u001b[0;0m
\u001b[0;32mGreen\u001b[0;0m
\u001b[0;33mYellow\u001b[0;0m
\u001b[0;34mBlue\u001b[0;0m
\u001b[0;35mPink\u001b[0;0m
\u001b[0;36mCyan\u001b[0;0m
\u001b[0;37mWhite\u001b[0;0m
\u001b[0;40mFirefly dark blue background\u001b[0;0m
\u001b[0;41mOrange background\u001b[0;0m
\u001b[0;42mMarble blue background\u001b[0;0m
\u001b[0;43mGreyish turquoise background\u001b[0;0m
\u001b[0;44mGray background\u001b[0;0m
\u001b[0;45mIndigo background\u001b[0;0m
\u001b[0;46mLight gray background\u001b[0;0m
\u001b[0;47mWhite background\u001b[0;0m

Colors

\u001b[0;30mExample\u001b[0;0m \u001b[0;31mExample\u001b[0;0m \u001b[0;32mExample\u001b[0;0m \u001b[0;33mExample\u001b[0;0m \u001b[0;34mExample\u001b[0;0m \u001b[0;35mExample\u001b[0;0m \u001b[0;36mExample\u001b[0;0m \u001b[0;37mExample\u001b[0;0m

Backgrounds

\u001b[0;40mExample\u001b[0;0m \u001b[0;41mExample\u001b[0;0m \u001b[0;42mExample\u001b[0;0m \u001b[0;43mExample\u001b[0;0m \u001b[0;44mExample\u001b[0;0m \u001b[0;45mExample\u001b[0;0m \u001b[0;46mExample\u001b[0;0m \u001b[0;47mExample\u001b[0;0m

Backgrounds & Colors

\u001b[0;40;30mExample\u001b[0;0m \u001b[0;40;31mExample\u001b[0;0m \u001b[0;40;32mExample\u001b[0;0m \u001b[0;40;33mExample\u001b[0;0m \u001b[0;40;34mExample\u001b[0;0m \u001b[0;40;35mExample\u001b[0;0m \u001b[0;40;36mExample\u001b[0;0m \u001b[0;40;37mExample\u001b[0;0m
\u001b[0;41;30mExample\u001b[0;0m \u001b[0;41;31mExample\u001b[0;0m \u001b[0;41;32mExample\u001b[0;0m \u001b[0;41;33mExample\u001b[0;0m \u001b[0;41;34mExample\u001b[0;0m \u001b[0;41;35mExample\u001b[0;0m \u001b[0;41;36mExample\u001b[0;0m \u001b[0;41;37mExample\u001b[0;0m
\u001b[0;42;30mExample\u001b[0;0m \u001b[0;42;31mExample\u001b[0;0m \u001b[0;42;32mExample\u001b[0;0m \u001b[0;42;33mExample\u001b[0;0m \u001b[0;42;34mExample\u001b[0;0m \u001b[0;42;35mExample\u001b[0;0m \u001b[0;42;36mExample\u001b[0;0m \u001b[0;42;37mExample\u001b[0;0m
\u001b[0;43;30mExample\u001b[0;0m \u001b[0;43;31mExample\u001b[0;0m \u001b[0;43;32mExample\u001b[0;0m \u001b[0;43;33mExample\u001b[0;0m \u001b[0;43;34mExample\u001b[0;0m \u001b[0;43;35mExample\u001b[0;0m \u001b[0;43;36mExample\u001b[0;0m \u001b[0;43;37mExample\u001b[0;0m
\u001b[0;44;30mExample\u001b[0;0m \u001b[0;44;31mExample\u001b[0;0m \u001b[0;44;32mExample\u001b[0;0m \u001b[0;44;33mExample\u001b[0;0m \u001b[0;44;34mExample\u001b[0;0m \u001b[0;44;35mExample\u001b[0;0m \u001b[0;44;36mExample\u001b[0;0m \u001b[0;44;37mExample\u001b[0;0m
\u001b[0;45;30mExample\u001b[0;0m \u001b[0;45;31mExample\u001b[0;0m \u001b[0;45;32mExample\u001b[0;0m \u001b[0;45;33mExample\u001b[0;0m \u001b[0;45;34mExample\u001b[0;0m \u001b[0;45;35mExample\u001b[0;0m \u001b[0;45;36mExample\u001b[0;0m \u001b[0;45;37mExample\u001b[0;0m
\u001b[0;46;30mExample\u001b[0;0m \u001b[0;46;31mExample\u001b[0;0m \u001b[0;46;32mExample\u001b[0;0m \u001b[0;46;33mExample\u001b[0;0m \u001b[0;46;34mExample\u001b[0;0m \u001b[0;46;35mExample\u001b[0;0m \u001b[0;46;36mExample\u001b[0;0m \u001b[0;46;37mExample\u001b[0;0m
\u001b[0;47;30mExample\u001b[0;0m \u001b[0;47;31mExample\u001b[0;0m \u001b[0;47;32mExample\u001b[0;0m \u001b[0;47;33mExample\u001b[0;0m \u001b[0;47;34mExample\u001b[0;0m \u001b[0;47;35mExample\u001b[0;0m \u001b[0;47;36mExample\u001b[0;0m \u001b[0;47;37mExample\u001b[0;0m

Bold

\u001b[1;30mExample\u001b[0;0m \u001b[1;31mExample\u001b[0;0m \u001b[1;32mExample\u001b[0;0m \u001b[1;33mExample\u001b[0;0m \u001b[1;34mExample\u001b[0;0m \u001b[1;35mExample\u001b[0;0m \u001b[1;36mExample\u001b[0;0m \u001b[1;37mExample\u001b[0;0m

Underlined

\u001b[4;30mExample\u001b[0;0m \u001b[4;31mExample\u001b[0;0m \u001b[4;32mExample\u001b[0;0m \u001b[4;33mExample\u001b[0;0m \u001b[4;34mExample\u001b[0;0m \u001b[4;35mExample\u001b[0;0m \u001b[4;36mExample\u001b[0;0m \u001b[4;37mExample\u001b[0;0m
@kkrypt0nn
Copy link
Author

Oh fair enough ^^ I will also edit that :)

@asdwqdasd123sasda
Copy link

Hey! i can't do this

@kkrypt0nn
Copy link
Author

kkrypt0nn commented Jan 11, 2022

As guide says:

Discord is now slowly rolling out the ability to send colored messages within code blocks.

Not everyone has access to that feature yet. You will have to be patient.

@AloneMaster
Copy link

Wow ! thanks for making this guide it looks so cool.

@Cupcakee1
Copy link

is there a way to write this and for it not to show the slide code on mobile??

@kkrypt0nn
Copy link
Author

kkrypt0nn commented Jan 12, 2022

No there is no way to make it work on mobile. I am running the Discord Canary (Alpha) Mobile Version 11.1 (Build 111201) and syntax highlighting is far behind, as always.
The only languages I got working are Python and JavaScript. All others, including ANSI, are not working and this is nothing new.
You will need to wait some time for it to be visible on mobile.

@DomzyMonz
Copy link

DomzyMonz commented Jan 12, 2022

I just found out you can make the text underlined.
image
It's really buggy, though, the underline got removed when i reloaded the channel, and it underlines every ANSI code block

@kkrypt0nn
Copy link
Author

Thanks, will be edited accordingly as soon as possible!

@darksunlight
Copy link

darksunlight commented Jan 13, 2022

It's really buggy, though, the underline got removed when i reloaded the channel, and it underlines every ANSI code block

Appending \u001b[0m to reset the styles after each message seems to prevent this.

@asportnoy
Copy link

One thing to clarify is if you're typing it in the app, writing \u001b will not work. You have to actually paste the character.

@revelcw
Copy link

revelcw commented Jan 22, 2022

Is there no way to make it italic?

@CoolingTool
Copy link

I'm just gonna point out that discord uses this https://github.com/discord/SimpleAST for mobile code highlighting. Hasn't been updated for awhile and isn't up to date in the app since typescript doesn't work in canary when it was added back in november

@sevenc-nanashi
Copy link

https://gist.github.com/sevenc-nanashi/67bfed2bdd0758eb20ac9bcd6fd88f84
I've translated into Japanese, please tell me if it's bad.

@TheOnlyWayUp
Copy link

Huh, I remember commenting on here, did my message get deleted?

@TacosGit
Copy link

Wait I cant do this XD

@wooningeire
Copy link

wooningeire commented Feb 22, 2022

Some things (tested in Firefox + Discord Canary):

  • You can specify as many modifiers as you want (but at least 1) in a single escape sequence; you aren't required to specify a {format} alongside a {color}, and Discord does not appear to make the distinction between {format}s and {color}s as described here.
  • Order of the different categories does not matter; you can specify background color and text color and formatting in any order in a single escape sequence, and in any order in separate escape sequences.
    • However, the modifiers are still parsed from first-to-last:
      • If you have multiple text color modifiers in an escape sequence, for instance, only the last one will take effect.
      • If you move around the 0 (reset) modifier, only the modifiers following the 0 will take effect (and the rest will be reset).
  • Should note that all of these modifiers add onto the previous formatting. If you have �[32m hello �[1;42m hi, then hi will have a text color, a background color, and be in bold, while hello will only have a text color.

There is a bug with ANSI codeblocks currently that causes styles from one block to overflow into other blocks. Namely, the last style in the last rendered ANSI codeblock (you can trigger a re-render by having the mouse enter or leave a message containing a codeblock) will be used to render the first part of the next rendered ANSI codeblock. The text editor also experiences this. For people doing stuff with ANSI codeblocks, you might want to start off the message with an escape sequence containing a 0 to keep the message from changing when re-rendered. (The text editor also does not account for differences between Dark mode and Light mode when there is a background color applied.)

@asportnoy
Copy link

@AshKetchumPL

The \u001b is the unicode for ESCAPE/ESC, see http://www.unicode-symbol.com/u/001B.html. If you want to use it yourself without bots, then you need to copy paste the character from the website.

@Hamsterland
Copy link

Why the hell isn't this out yet

@asportnoy
Copy link

It is

@Hamsterland
Copy link

@asportnoy Give me an example of it being used ina code block then

@asportnoy
Copy link

All of the images in this gist

@Hamsterland
Copy link

I am on Canary and it does not work

@kkrypt0nn
Copy link
Author

kkrypt0nn commented Apr 26, 2022

I am on Canary and it does not work

Make sure you copy paste the character correctly from the website when using it without a bot.

Here is the website again http://www.unicode-symbol.com/u/001B.html

@F8ER
Copy link

F8ER commented May 2, 2022

I am on Canary and it does not work

As @kkrypt0nn mentioned:

Note the very first character which may not be visible or represent relatively ambiguous visuals in certain circumstances (e.g. unsupported/custom font/charset). It may represent a rectangle:
...
...
Perhaps it's worth to mentioned that some try experimenting with an HTML (&#x1B) or Unicode (\u001b) encoded character reference instead of the actual "raw" character, though so far it's noticed that Discord processes messages with the latter only.

Source: https://stackoverflow.com/a/72087277/5113030

@hdeviscute
Copy link

You can combine bold with underlined too, just put the numbers together
Example : 14 = Underlined Bold

@undefynedd
Copy link

This works nicely with the Block Elements in Unicode!

@KoopintheHub
Copy link

works for me. that's a really nice feature they added :)

@F8ER
Copy link

F8ER commented May 22, 2022

It's worth to mention that it may not work on certain Discord general mobile clients (e.g. Android), as of today at least (client/app: 126012 (stable)):
20220522_162618_nJNWs

@yoonyeonkeum
Copy link

@MegaCobblepot83
Copy link

Copy here: �[0;0m
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment