OP 20 December, 2020 - 10:59 PM
(This post was last modified: 20 December, 2020 - 11:32 PM by Financier.)
Hi everyone, welcome to the first thread in what will probably turn
into a few different threads surrounding this and similar topics.
Discord uses Markdown, a plain text formatting system that helps
you to make your text stand out amongst the #spem-gifs flooding the server.
On top of Markdown, I'll also be showing you how to color your text in Discord
I hope this helps some of you!
Discord Text Formatting Guide: Colors, Bold, Italic, Strikethrough
into a few different threads surrounding this and similar topics.
Discord uses Markdown, a plain text formatting system that helps
you to make your text stand out amongst the #spem-gifs flooding the server.
On top of Markdown, I'll also be showing you how to color your text in Discord
I hope this helps some of you!
Discord Text Formatting Guide: Colors, Bold, Italic, Strikethrough
Save This Page as a Reference
Once you've got the basics down, Discord formatting can be a super useful tool to make your content in your server a higher quality and to stand out in the crowd of servers every Discord user is bombarded with.
While you’re still learning the commands though, it may be a good idea to keep this page open for reference (or bookmarked).
Anyways, enough talk — let’s get formatting!
Behind the Scenes: Discord’s Text Formatting Engine
Whenever we, or anyone else, is on Discord spamming gifs away or Dank Memeing our lives away, in the background their is a text processing engine working furiously to engage all of us and to recognize our formatting choices to display them for others.
This “engine” is called Markdown.
Rundown on Markdown
Originally created in 2004 by John Gruber and Aaron Swartz, Markdown is a markup language designed to be lightweight and simple to read/write. (That is correct, Markdown is Redditdown)
It is text-based and uses specifically placed symbols to format words in bold, italics, underlined, etc.
It is text-based and uses specifically placed symbols to format words in bold, italics, underlined, etc.
Although it’s been most commonly used to format readme files, forum discussions, and to turn plain text into rich text in basic text editors, Discord’s developers saw its potential and brought it into the core software.
We’re going to dig into Discord Markdown in the next section so you can learn how to properly format all of your messages in any way you’d like.
Highlight.js Makes Color Possible
Before we dig into markdown I wanted to explain another neat feature the Discord developers added on. It’s a library called Highlight.js.
Now, I want to make it clear that Discord doesn’t have true full-text highlighting. You can’t say, “I want this word to be in red, and this one to be in blue!”. That kind of highlighting doesn’t exist.
What does exist for our text-coloring purposes, though, is a “hacked” version of text highlighting using syntax coloring methods from highlight.js.
Even though we can’t directly highlight text, we can create a code block in discord, point it towards a specific syntax highlighting profile included in highlight.js, and then use that to our advantage by wrapping our text in the appropriate symbols.
This will all make much more sense when we get to some juicy examples down below.
Remember This Going Forward
You don't have to remember all of that, or the coming information for that matter, because thats what this guide is for!
Just know that Discord uses Markdown for its text formatting, and Highlight.js for code block highlighting.
I’ll show you how to take advantage of these formatting options in the next section.
How to Format Text in Discord
And now the fun begins. I’m going to show you how to bold, italicize, underline, and strikethrough text as a starting point.
We’ll start with the basics, and then move on into creating code blocks for text coloring.
How to Bold Text in Discord
To create bolded text in discord, all you have to do is start and end the bolded text with two asterisks (*).
The asterisk is SHIFT+8 on your keyboard.
If you look at the image below, you’ll notice that I put two asterisks, or stars, in front of and after the text I wanted to be in bold.
**Hello** typed in Discord = Hello
How to Italicize Text (Create Slanted Italics) in Discord
To create italics or italicized text in Discord, you have to type the asterisk once again, but this time use only one asterisk.
To bold text, we used two asterisks, like this: **bold text**
For italics, we would do the same thing but with one single asterisk: *italicized text*
Again, the asterisk (star) is SHIFT+8 on your keyboard.
*Hello* typed in Discord = Hello
You don't have to remember all of that, or the coming information for that matter, because thats what this guide is for!
Just know that Discord uses Markdown for its text formatting, and Highlight.js for code block highlighting.
I’ll show you how to take advantage of these formatting options in the next section.
How to Format Text in Discord
And now the fun begins. I’m going to show you how to bold, italicize, underline, and strikethrough text as a starting point.
We’ll start with the basics, and then move on into creating code blocks for text coloring.
How to Bold Text in Discord
To create bolded text in discord, all you have to do is start and end the bolded text with two asterisks (*).
The asterisk is SHIFT+8 on your keyboard.
If you look at the image below, you’ll notice that I put two asterisks, or stars, in front of and after the text I wanted to be in bold.
**Hello** typed in Discord = Hello
How to Italicize Text (Create Slanted Italics) in Discord
To create italics or italicized text in Discord, you have to type the asterisk once again, but this time use only one asterisk.
To bold text, we used two asterisks, like this: **bold text**
For italics, we would do the same thing but with one single asterisk: *italicized text*
Again, the asterisk (star) is SHIFT+8 on your keyboard.
*Hello* typed in Discord = Hello
How to Create Bold Italicized Text in Discord (Bold + Italics)
You may be able to guess the markdown for Bold + Italics by now…
Instead of only one or two asterisks, it’s three asterisks.
***Hello*** typed in Discord = Hello
How to Underline Text in Discord
To format our text as underlined, we need two use two underscores (__)
Those of you unfamiliar, the underscore, _, is located in between the 9 and = symbols on your keyboard, and it the alternate of the hyphen, -. Use it by pressing Shift + Hyphen (or dash)
For example:
__Hello Again!__ typed in Discord = Hello Again!
How to Create Strikethrough Text in Discord
For strikethrough text, we need to use the tilde (~) key.
Two tildes cross out, or ‘strike through’, the text you type.
~~So, if you are starting to get it then Strikethrough this!~~ will appear as So, if you are starting to get it then Strikethrough this! in Discord.
Formatting on International Keyboard Layouts
Due to having to help a friend recently with this, I'll try to include International formats as well. No guarantees on this info's validity.
Here we make the assumption of the asterisk being “Shift + 8” and the tilde being “Shift + Backtick (`)”, but this isn’t always the case.
Here are some additional keyboard layouts that international users might encounter, and an example of where the asterisk would be on each of these layouts.
German: Shift+[+] (key right of Ü)
Spanish: Shift+[+] (key right of `^ (Spain) or ´¨ (Latin America))
French (France): * (key right of ù%)
French (Belgium): Shift+$ (key right of ^¨)
French (Switzerland): Shift+3
Italian: Shift+[+] (key right of èé)
Swedish: Shift+’ (key right of Ä)
You may be able to guess the markdown for Bold + Italics by now…
Instead of only one or two asterisks, it’s three asterisks.
***Hello*** typed in Discord = Hello
How to Underline Text in Discord
To format our text as underlined, we need two use two underscores (__)
Those of you unfamiliar, the underscore, _, is located in between the 9 and = symbols on your keyboard, and it the alternate of the hyphen, -. Use it by pressing Shift + Hyphen (or dash)
For example:
__Hello Again!__ typed in Discord = Hello Again!
How to Create Strikethrough Text in Discord
For strikethrough text, we need to use the tilde (~) key.
Two tildes cross out, or ‘strike through’, the text you type.
~~So, if you are starting to get it then Strikethrough this!~~ will appear as So, if you are starting to get it then Strikethrough this! in Discord.
Formatting on International Keyboard Layouts
Due to having to help a friend recently with this, I'll try to include International formats as well. No guarantees on this info's validity.
Here we make the assumption of the asterisk being “Shift + 8” and the tilde being “Shift + Backtick (`)”, but this isn’t always the case.
Here are some additional keyboard layouts that international users might encounter, and an example of where the asterisk would be on each of these layouts.
German: Shift+[+] (key right of Ü)
Spanish: Shift+[+] (key right of `^ (Spain) or ´¨ (Latin America))
French (France): * (key right of ù%)
French (Belgium): Shift+$ (key right of ^¨)
French (Switzerland): Shift+3
Italian: Shift+[+] (key right of èé)
Swedish: Shift+’ (key right of Ä)
If you use one of these alternative keyboard layouts, adjust accordingly.
The vast majority of users online are using the English/American Standard, but I wanted to acknowledge the other formats to
make it known that this can be down by anyone, with any keyboard, regardless of the key format.
make it known that this can be down by anyone, with any keyboard, regardless of the key format.
Combining Text Formatting Options Even Further
We can also combine the underline into bold, italics, and bold+italics.
Here are examples:
__*underlined and italicized text*__ will appear as underlined and italicized textUnderlined and Bolded Text
__**underlined and bolded text**__ will appear as underlined and bolded textUnderlined, Italicized, and Bolded Text
__***underlined, italicized, and bolded text***__ appears as underlined, italicized, and bolded text
How to ‘Escape’ Text and See All Your Underscores and Asterisks
In case you actually want to see your underscores or asterisks in a message (like in an emoji, for example), you can use the backslash ‘\’ key to skip markdown formatting and show the text just like it is.
I have examples below showcasing this (notice the backslashes ‘\’ at the beginning of each character).
The excessive backslashes are needed here because I have underscores in my message.\_\_\*\*\*I want this message to show the entirety of the formatting so that these fine people can see that you can bypass the Markdown!\*\*\*\_\_\_
But note that the backslashes at the end actually aren’t required if you have them all in the beginning:
If I didn’t have underscores, a single backslash ‘\’ would do:
\**I want this message to show the entirety of the formatting so that these fine people can see that you can bypass the Markdown!**
is the same as
\*\*I want this message to show the entirety of the formatting so that these fine people can see that you can bypass the Markdown!\*\*
\**I want this message to show the entirety of the formatting so that these fine people can see that you can bypass the Markdown!**
is the same as
\*\*I want this message to show the entirety of the formatting so that these fine people can see that you can bypass the Markdown!\*\*
That Concludes Basic Formatting!!!!!!!!!!
And that’s it for basic formatting. It’s pretty simple stuff, and you should have it down after a few messages.
The only keys you have to remember are Underscores, Asterisks (Stars), and Backslashes.
Advanced Text Formatting in Discord: Writing in Color
And now we get to the fun part, coloring!
Once you get a few colorful messages out there in the channels you frequently visit, you’ll start getting asked how it’s done.
We’re going to cover some basics (code blocks), and then jump right into coloring your messages! Let’s get to it!
I do give some examples, however due to the 3 image limit here on the forum you'll just have to go along with me and paste them into Discord to see the outcome.
I wasn't able to show every example, but if anyone needs help feel free to reply and I'd be happy to help ya out
Single Line Code Blocks in Discord
To create a single line code block in discord, you need to use the ‘tick’ or ‘backtick’ character: `.
Since this key can be a difficult key to find if you’ve never had to use it before (up until this point), I included a nice highlighted keyboard layout diagram below:
The ‘tick’ or ‘backtick’ character should be in the upper left corner of your keyboard right under the escape (ESC) key.
Once you’re familiar with the ‘backtick’ key, let’s create a single line code block. All you have to do is put a single backtick before and after your text.
`Like This!`
Multiple Line (Multiline) Code Blocks in Discord
Just like the single line code block, multi-line code blocks also use the backtick (“`) character. The only difference is, instead of writing a single backtick (`) you have to write three (“`) before and after your text.
The useful thing here is that you can press enter and space your text across multiple lines, all formatted in a single multi-line code block.
```Experimenting with … … Multiple lines… … For my code blocks!```
You’ll notice in the image above that we have all of our text in a code block, but this time it’s in multiple lines just like we wanted.
How to Format Colored Text in Discord
And now the moment we’ve all been waiting for… [drumroll] … Colored Text!
I was searching around the web for a good example of some colored text formatting in Discord, but couldn’t find anything clear.
There were some examples, but they were pretty hazy. I couldn’t find a single guide that clearly showed you how to format your text if you wanted it to be in a certain color.
As I mentioned in the intro, what we’re going to be doing here is ‘hacking’ or ‘hijacking’ syntax highlighting from Highlight.js running in the background in Discord.
We have to do this because, as of writing this, Discord doesn’t have built-in text highlighting functions.
As a result, we’ll have to do a little bit of a workaround — but as long as it works, it works!
Here’s How Text Coloring in Discord Works
Since we’ll be using a workaround based on Highlight.js, here’s how it’s going to work.
We will be creating multiline code blocks using three backticks and specifying the syntax highlighting language.
We can do this by including the highlighting programming language reference right at the beginning of the multiline code block.
We’ll be “exploiting” some syntax highlighting and using it to our advantage for coloring some text.
I included most of the colors you’d expect to use below, and tried to show the differences between various language references.
Limitations to this Text Coloring Method
There are (unfortunately) limitations to this method. The most common limitation being, your text has to be connected in one word in some referenced syntax highlighting languages (not all!).
This means you can’t type: This is a sentence.
You’ll have to type: This_is_a_sentence OR Thisisasentence.
Why is this? Well, since we’re exploiting syntax highlighting to highlight our Discord messages, we’re basically trying to make the multiline code block think that our message is literal programming code.
Most of the time the colors we want are contained in variables, which by definition, can’t contain any spaces.
One place this does work well is in code comments and strings. I tried to include code comments and strings in each of the colors below as frequently as possible (to make it easy to type out).
If you look closely, you’ll notice I did include some variables and mentioned that you can’t have spaces if you choose to use those formatting methods. Even then, this may still be a perfectly viable method for single words.
Anyways, that’s enough yapping from me — let’s get coloring!
How to Color Text RED in Discord
Diff Syntax Highlighting for Red (EASY)
Include dashes (-) before the line you want red colored text.```diff
- Here's some red colored text! ```
shows in Discord as
- Here's some red colored text!
CSS Syntax Highlighting for Orange (Red-Orange)
Include brackets [ ] around the text you want highlighted. ```css
[RED Colored Text in CSS Highlighting] ```
How to Color Text YELLOW in Discord
Fix Syntax Highlighting for Yellow (EASY)
In Fix, everything you type is yellow by default! This is a great, easy way to have yellow text. ```fix
Everything is yellow in fix -- No matter the line! ```
Apache Syntax Highlighting for Yellow (Limitation: NO SPACES)
Include a percent sign and right curly brace, %{, at the beginning of your text, and a left curly brace, }, at the end to highlight your text yellow in Apache syntax.```apache
%{Dark_YELLOW_Colored_Text} ```
How to Color Text GREEN in Discord
Diff Syntax Highlighting for Light Green (EASY)
Include a plus sign (+) before the line that you want turned green. ```diff
+ Here's some green colored text! ```
CSS Syntax Highlighting for Light Green
Include quotation marks ” ” around the text you want colored Light Green.
```css "Here's some nice LIGHT GREEN colored text" ```
Bash Syntax Highlighting for Dark Green (EASY)
Quotation marks around your text ” “
```bash
"Here's some nice, dark green text" ```
Quotation marks around your text ” “
```bash
"Here's some nice, dark green text" ```
Note: This dark green color and quotation marks around your text also works in a bunch of other reference languages, not only “bash”. It works with “coffeescript”, “cpp”, and many more.
JSON Syntax Highlighting for Dark Green (EASY)
Just like in Bash, quotation marks around the text you want to color dark green.
```json "Green colored text in JSON" ```
How to Color Text BLUE in Discord
INI Syntax Highlighting for Blue
Place brackets [ ] around the text you want highlighted blue.```ini
[Here's some blue highlighted text] ```
CSS Syntax Highlighting (Limitation: NO SPACES)
INI Syntax Highlighting for Blue
Place brackets [ ] around the text you want highlighted blue.```ini
[Here's some blue highlighted text] ```
CSS Syntax Highlighting (Limitation: NO SPACES)
Put a single dot (.) in front of the text you want colored blue, and make sure you don’t have any spaces in the line.
```css
.dark_BLUE_text_without_spaces ```
shows as
.dark_BLUE_text_without_spaces ```
Color Formatting Takeaways
.dark_BLUE_text_without_spaces ```
shows as
.dark_BLUE_text_without_spaces ```
Color Formatting Takeaways
As i'm sure you've noticed, there are definitely some limitations. Some colors we can't type without spaces, for example . . but for the most part, it's relatively easy to color our text in Discord and will definitely get you tons of people asking how you managed to do it! :)
Thanks Crackers Merry Christmas, let's get it crackin' in this bitch Until every last one of us is cracked out our minds
I hope that this little guide was able to help at least one noobie freshmeat starter pack get one step closer to becoming a Discord moderator and hopefully accomplishing his goal of one day owning a level 3 Discord server