How to make colored Text/Backgrounds in your forum posts using markdown (V2.2.1) 📝

First off, if you wanna learn about how to use markdown to format your posts to make them more neat and readable, I recommend this guide made by Harryisbeast.
Markdown Tutorial
Here is a github post with similar information
Markdown cheatsheet by adam-p on github

Here are some links to things I made using markdown.
My Store for ingame items [closed temporarily]
A SCP story I made for Vesteria


Demonstration

You can use markdown to implement code into your posts and do some neat stuff like this:
derpypie23 is pretty lame Dont click this < hover your mouse over this

This_is_just_to_catch_your_attention 

These are drop-down menus you can click them


Explanation

Explanation

I am going to be covering colored backgrounds/text only so you need to understand only 2 things!

Code blocks:

This is a code block!

(New code blocks must be on a empty line!)

Code lines:

This is a code line!

Code lines can be on any line, like this:

I like to eat pie

You make a code line like this

Input: I like to eat ` pie `
Output: I like to eat pie

You make code blocks like this
( You can use ``` Or ~~~ )

~~~(code language) 
(Prefix)(your text here) 
~~~ 

Here is a example

~~~diff 
-This background is Crimson
~~~

Now onto the fun part


Text Colors

Cyan

Language: none
Prefix: none (this is the default color)
(characters must be separated with _ )

This_text_is_Cyan_123
a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_x_y_z_1_2_3_4_5_6_7_8_9_0 

Light-Red + Automatic Bold

Language: javascript (only applies to the first example)
Prefix: ’ Or “function” (function only applies to the first example)
(There must be some form of letters in front of the ’ in order for the second example to work)
(The first example has the Bold affect already applied)

function This text is Light-Red_123 123

Or

test' This text is Light-Red 123

Or

' This text is Light-Red 123 '
' a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 '

Dirty-White + Unique Font

Language: none
Prefix: // Or #
(you could say this is gray but I really don’t think its dark enough)

// This text is Dirty-White + It has a Unique Font 123

Or

# This text is Dirty-White + It has a Unique Font 123
# a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0

Purple

Language: none
Prefix: <p (text here) >
(must be followed by a function symbol ` - ~ @ ! ? $ * & ^ < > : " ’ [ ] { } + = - _ \ | ; & , . )
(some words are a bit weird and need a _ to connect them but not always)

<p  This text_is purple 123 > -
<p  a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 > -

Pink

Language: `` (here the language prefix is not a actual code language, it has to be in the TEXT)
Prefix: : (it can be at the end instead or the start in certain situations)
(characters must be separated with _ )
( the language prefix can be anywhere in the text as long as it is in the text area,
here are 3 examples)

``
:This_text_is_Pink_123

Or

:This_text_is_Pink_123 ``

Or

``:This_text_is_Pink_123
``:a_b_c_d_e_f_g_h_i_j_k_l_m_n_o_p_q_r_s_t_u_v_w_y_x_z_1_2_3_4_5_6_7_8_9_0

Green

Language: `` (here the language prefix is not a actual code language, it has to be in the TEXT)
Prefix: / (you can close both ends with the prefix to negate the need for the language prefix)
(there must be a function symbol before the prefix ` - ~ @ ! ? $ * & ^ < > : " ’ [ ] { } + = - _ | ; & , .)
(the language prefix can be anywhere in the text as long as it is BEFORE the text area,
here are 3 examples)

(some words are a bit weird and need a _ to connect them but not always)

``
=/ This text_is Green 123

Or

`` =/ This text_is Green 123 

Or

=/ This text_is Green 123 / 
=/ a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0 /

Blue

Language: none (This color does not need code blocks or code lines)
Prefix [ ] followed by () (this color can be achieved by making broken hyper links)
(here are some examples)

This [text]() is [Blue]() 123

This text is Blue 123

Or

[T]()h[i]()s [t]()e[x]()t [i]()s [B]()l[u]()e [1]()2[3]()

This text is Blue 123

Or
[This text is Blue 123]()

This text is Blue 123

a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0


Background Colors

Crimson

language: none
Prefix: -

- This background is Crimson 123 (background can be extended with spaces)        
-                                                         
-                          
- a b c d e f g h i j k l m n o p r s t u v w x y z 1 2 3 4 5 6 7 8 9 0          

Extra Stuff

Extra Stuff

There are some things I found that don’t deserve their own section,
here are a few:

The “cpp” language prefix can be used to give numbers a baby blue color
(or you can just use any cyan character or word one space in front of a number without the “cpp” prefix for the same affect)

1 2 3 4 5 6 7 8 9 0 

Or

apple 1 2 3 4 5 6 7 8 9 0

Certain command words will appear Teal instead of the default Cyan if used alone example:

test, print, read, return, wait
test_print_read_return_wait_apple

This is done without code block or code lines!
Using Syntax Highlighting we can give something a red background and Strikethrough using the delete function.

Gooble Gobble one of us

<del>Gooble Gobble one of us</del>

Thanks for reading!

I am actively working on trying to find more combinations,
I will be editing this topic with new information as it comes.
If you know something I don’t please share!

5 Likes
Lol_Now_I_Know_How_To_Do_cool_Things_Thank_You_Lol
Wait what did i d o???
2 Likes

I thought you needed to chain code to make cyan text but turns out you don’t
your reply showed me this!

EDIT: sorry if that makes no sense i don’t know how else to explain it

oh_ok_sure

thats the wrong type of code block!
``` oh_ok_sure ```
do that!

oh_ok_sure
oh_ok_sure

oh_ok_sure

oh_ok_sure

oh_ok_sure 
1 Like

‘’’
hello_vesterians
‘’’

nani, how u do this

your using this "
its a back-tick
near the top left of your keyboard `

Update V2

  • Added Pink, Green, Purple, cream/dirty-white text

  • Added full alphabet and numbers for each color/background

  • Added alternative methods for: red, cream/dirty-white, Pink and green

  • Added some things to extra stuff

  • Added few links to main page

  • Modified Crimson background

  • Optimized with drop down menus

  • Optimized explanation and cleaned up (removing unnecessary explanations)

  • Removed redundancies

Update V2.1

  • Modified links

Update V2.2

  • Added Blue

@Meta Hey I want to edit this guide but its been too long and it locked me out, can you somehow let me edit it

Made it wiki so you can edit.

ight thanks

V2.2.1

  • removed redundant or unnecessary statements
  • corrected bad info in “Extra Stuff”

Back to top

function This text is Light-Red_123 123

read the explanation first
you have to use markdown