Guide On Using Markdown/HTML Code For Forum Usage!

weirdkid5
weirdkid5 Member Posts: 2,144
edited June 2018 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!

Post edited by weirdkid5 on

Comments

  • Dragonredking
    Dragonredking Member Posts: 874

    Thx Man

  • MeowLux
    MeowLux Member Posts: 80

    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. ;)

  • weirdkid5
    weirdkid5 Member Posts: 2,144
    edited June 2018

    @Dragonredking said:

    Thx Man

    Jesus man my eyes lmao

  • Jack11803
    Jack11803 Member Posts: 3,930

    Dang, this guide is awesome. Definitely better than mine.

  • weirdkid5
    weirdkid5 Member Posts: 2,144

    @Jack11803 said:

    Dang, this guide is awesome. Definitely better than mine.

    I appreciate it! I spend a good 3 hours or so on it lmao

  • RagingCalm
    RagingCalm Member Posts: 408
    edited June 2018

    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.

  • Runiver
    Runiver Member Posts: 2,095

    @weirdkid5 said:

    @Dragonredking said:

    Thx Man

    Jesus man my eyes lmao

    Black actually hurts WAY LESS than most color around in my case LOL.

  • mintchapstick
    mintchapstick Member Posts: 891

    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.

  • weirdkid5
    weirdkid5 Member Posts: 2,144

    @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.

  • RagingCalm
    RagingCalm Member Posts: 408

    @weirdkid5 GREAT!

  • easi_solstice
    easi_solstice Member Posts: 32

    Honestly should be pinned

  • TheTimeMachine
    TheTimeMachine Member Posts: 229
    edited June 2018

    Hm this is gonna take some getting used to

  • TheTimeMachine
    TheTimeMachine Member Posts: 229
    edited June 2018

    Test Test

  • Deverer
    Deverer Member Posts: 24
    edited June 2018
    • list

    • list

    Huh, doesn't show it works in the preview. Thought something was wrong, but thanks for all the info!

  • ChesterTheMolester
    ChesterTheMolester Member Posts: 2,771
    edited June 2018
    Bump
  • CL4P_TRAP_ER
    CL4P_TRAP_ER Member Posts: 114
    edited July 2018

    Thanks this helped so much!

  • Khalednazari
    Khalednazari Member Posts: 1,433
    edited July 2018
    Pin this up. Thanks. 
  • ChesterTheMolester
    ChesterTheMolester Member Posts: 2,771
    edited August 2018

    >! ######### spoilers how do they work


    Post edited by ChesterTheMolester on
  • ChesterTheMolester
    ChesterTheMolester Member Posts: 2,771
    Skarkio said:

    can you add the code for how to add a image in a post?

    Not necessary, its the first on the right above your input.
  • ChesterTheMolester
    ChesterTheMolester Member Posts: 2,771
    edited October 2018
    <font color=#ff1453> I think ill never get it right.
    Post edited by ChesterTheMolester on
  • ChesterTheMolester
    ChesterTheMolester Member Posts: 2,771
    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

    <font color=#ff1453> this is getting depressing.
  • Iceman
    Iceman Member Posts: 1,457
    edited January 2019
    <b>title</b>
    <h1>title</h1>
  • fluffybunny
    fluffybunny Member Posts: 2,161

    This is very helpful! Thank you.

  • Seiko300
    Seiko300 Member Posts: 1,862
    edited July 2020

    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