Skip to content

Guide On Using Markdown/HTML Code For Forum Usage!

weirdkid5 weirdkid5
in General Discussions

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
  1. Example
  2. Of
  3. Numbered
  4. 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.

  1. First
    • Second
      • Third

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

Categories