Guide On Using Markdown/HTML Code For Forum Usage!
So these forums are a lot more entertaining because we can do things like text colors, easier access to Strikethroughs and the like. I decided to make a guide on the possible text manipulations you can use as an easy reference for the forum users. The link @Clyde made in his Forum Guide post nicely links to the Wikipedia page for Markdown, but I feel it would be better to have a guide with all on the fonts for everyone to use for reference actually ON the forum. The forums currently will accept BOTH HTML AND MARKDOWN FORMATS. Keep in mind this will be a very long post, as it is to be used as a guide and a reference! If you wish to see which codes I used to create this post, you can quote it and analyze it. I personally use HTML, but will create the Markdown section using entirely Markdown as it is extremely useful, especially for making your text look pretty. This post will be a Work-In-Progress, so if I miss anything, please feel free to add to the thread and I will update this OP! Thank you!
Markdown Style
Markdown is a more up-to-date and user-friendly style of posting that allows for ease of access to different fonts, as well as awesome things like tables! Thanks to GitHub for helping me put this together.
Headers
Headers can be created simply using the hash symbol # in front of the phrase you wish to become the Header. Using more hashes creates different styles of Headers, up to a maximum of 6. It seems like it may function strangely on here, as more hashes are supposed to make the Headers smaller, but it seems to not be the case on these forums.
#Example
One
Two
Three
Four
Five
Six
Pick your style! You can also create Header two by typing a word, and then typing three hyphens ---, asterisks ***, or underscores ___ on the line below it:
Example
---
Bold, Italics and Other Text Manipulation
Bold text can be created using two asterisk symbols ** around the text like this: **Example**
Italic text can be created using one asterisk symbol * around the text like this: *Example*
Strikethroughs can be created using two tilde symbols ~ ~ around the text like this: ~ ~Example~ ~ (remove spaces)
You can also combine Bold and Italic by using underscores _ inside the double asterisk ** like this: **_Example_**
Quotes and Mentioning
You can make a quotation by either easily clicking the quote icon at the bottom of the post, or by using the greater than symbol >: >Example
This is not a direct quote.
For smaller quotes, mostly used for quoting code, you can surround the text using the backtick ` (same button as the tilde \~, just don't hold shift): `Example`
This is not a direct small quote
You can mention people by placing an at sign @ and then the user's name in front of it, like how I mentioned Clyde at the beginning of the OP: @Example
Spoilers
You can create a spoiler text that is obscured by a box that a the user must click "show" on to see by typing a greater than sign > and an exclamation point ! before the spoiler: >!Example
This is a spoiler!
Links
An in-line link can be made by placing brackets [ ] around the text you wish to hyperlink, and then simply pasting the link in parenthesis ( ) directly next to it: [Example](http://forum.deadbydaylight.com)
Lists
You can create a list by placing a hyphen -, asterisk *, or starting with the number 1 preceding text you plan to place and leaving a space between it.
- Example
- Of
- List
- Example
- Of
- Numbered
- List
You can also create a nested list by starting with a numbered list, and then entering a hyphen - underneath the first letter of the word above the nesting.
- First
- Second
- Third
- Second
Tables
You can actually create a table in here using certain formatting techniques! To create your table, each vertical section will be separated by vertical bars |, and you will separate the headers from the content by using AT LEAST 3 hyphens -.
Example | Without | Formatting
--- | --- | ---
I | Like | Potatoes
Yummy | Gummy | Tummy
Here is what a table would look like in full. Use this to create some awesome stuff!
| Example | With | Formatting |
|---|---|---|
| I | Like | Potatoes |
| Yummy | Gummy | Tummy |
If you wish, you can surround the entire table with vertical bars and make as many hyphens as you want to help you line up a "preview" of your table before you complete it, however this is entirely optional and is tedious.
Horizontal Line
If you, for whatever reason, wish to section off something without using a Header, you can always make a "Horizontal Rule" by typing three hyphens ---, asterisk ***, or underscores ___.
Line Below
Line Above
Emojis
This website has its own list of emojis outside of the 8 you can use by selecting them at the top. Will update this section with all possible Emojis shortly.
Ignore Formatting
In order to ignore the formatting like I have to show a few of the "examples," simply type a backslash \ before the line you wish to ignore. Keep in mind this does not actually work for certain things that well, like Mentions and Strikethroughs. So to show the formatting for bold, you would type \** (funny to type that, I had to type two backslashes. I seem to be having Shulk nightmares right about now....)
HTML Style
HTML style of formatting is a little outdated and most places opt to use Markdown, however HTML code works perfectly fine here, and is needed for certain things like underlines or Font Colors, which are covered after this section. HTML is pretty much strictly text manipulation and does not have cool features like tables or mentions that Markdown does. Thanks to Tutorial's Point and Stack Overflow for helping me put this together.
Headers
Like in Markdown, there are 6 different headers you can create by surrounding the text you wish to become the Header with
<h1></h1>. Replace the number 1 with any number up to 6 for the different Header styles. I won't bother creating all of the Headers in HTML format as they are exactly the same as in Markdown format.
Bold, Italics, and Other Text Manipulation
Bold can be created by either surrounding the text with <b></b> or <strong></strong>. There is no difference, in coding "strong" just implies heavier emphasis. Italics and Strikethroughs have similar alternatives: <b>Example</b>
Italics can be created by either surrounding the text with <i></i> or <em></em>: <i>Example</i>
Strikethroughs can be created by either surrounding the text with <strike></strike> or <del></del>: <strike>Example</strike>
Underlines can be created by either surrounding the text with <u></u> or <ins></ins>: <u>Example</u>
Superscripts and subscripts can be created by surrounding the text with <sup></sup> and <sub></sub> respectively: <sup>Example</sup>
Bigger and smaller text can be created by surrounding the text with <big></big> and <small></small> respectively: <big>Example</big>
You can also surround it with multiple of the same size in order to make it even BIGGER or smaller
If you desire, you can monospace your text by surrounding the text with <tt></tt> This is simply the same as the small quotes used for coding in Markdown: <tt>Example</tt>
Highlighting can be done by surrounding the text with <mark></mark>: <mark>Example</mark>
Like with Markdown, you can also combine any of these together by surrounding the text with multiple codes, like so:
Mish-mash!
<mark><big><u>Example</mark></big></u>
Links
An in-line link can be made by using the following code: <a href="Insert link here">insert desired text here</a>
Ignore Formatting
In order to ignore the formatting of HTML to show you the codes like I used here, you must use the code "& lt;" (that is a lowercase L) for the less than < symbol, and "& gt;" for the greater than > symbol. Simply remove the quotations and spaces between the ampersand (&) and letter. Do not forget the semicolon ; at the end!
FONT COLORS
This is my favorite. This one is real simple. Type this code when wanting to post in a particular color:
<font color="insert color here">
Simply inside the quotations type the name or color HEX code of the number you wish to change your text to. For example, the text color I use is called Dark Violet, so I would type "darkviolet" inside my quotations. Alternately, I could also use the HEX code #9400D3 and get the same result. Here is a good chart for reference. Thanks to nafSadh on Pinterest for making this: 
If I have made any errors, forgotten something, or you would like for me to update and add something to this, please let me know!
Comments
-
Thx Man
2 -
Extremely useful especially when there is basically none of these functions available by a button press, instead having to do them manually. Should be pinned.
3 -
@Dragonredking said:
Thx Man
Jesus man my eyes lmao
1 -
Dang, this guide is awesome. Definitely better than mine.
1 -
I appreciate it! I spend a good 3 hours or so on it lmao
1 -
Just bumping your post so more people can see this
Edit: is there any way you can pretty please edit OP to not burn the readers' eye sockets out? I think I went temporarily blind trying to read how to make a spoiler.
1 -
Black actually hurts WAY LESS than most color around in my case LOL.
2 -
You can also use things like:
https://www.sessions.edu/color-calculator/
Color wheel pickers, where you roll around a color wheel and it pops out a hex code for you to copy and paste. Adjust your tint and shade on the bar on the side.
You can also preview your text color, using the preview button next to save draft, if you're not sure how well the color you picked will fit with the background of the forum.
1 -
@RagingCalm said:
Just bumping your post so more people can see this
Edit: is there any way you can pretty please edit OP to not burn the readers' eye sockets out? I think I went temporarily blind trying to read how to make a spoiler.
Yep, I did it for you. I went ahead and got rid of all the coloring except for one paragraph in the color text section to keep it as an example.
I will also be adding the emojis when I get off work tonight.
2 -
@weirdkid5 GREAT!
2 -
Honestly should be pinned
4 -
Hm this is gonna take some getting used to
0 -
Test Test
0 -
list
list
Huh, doesn't show it works in the preview. Thought something was wrong, but thanks for all the info!
0 -
Bump0
-
Thanks this helped so much!
0 -
Pin this up. Thanks.0
-
>! ######### spoilers how do they work
Post edited by ChesterTheMolester on0 -
Not necessary, its the first on the right above your input.Skarkio said:can you add the code for how to add a image in a post?
0 -
<font color=#ff1453> I think ill never get it right.
Post edited by ChesterTheMolester on0 -
<font color=#ff1453> this is getting depressing.Skarkio said:@ChesterTheMolester dijo:
I think ill never get it right.Because you didn't put a space between "font" and "color"! This is the right way: font color=#ff1453 just add the <>'s
0 -
<b>title</b>
<h1>title</h1>0 -
This is very helpful! Thank you.
0 -
How do you do this? I read the guide and I'm still so confused on how to quote people like this
It's so frustrating not being able to or not knowing how to quote people on different pages of threads
0
