Forum Markdown Guide

General Discussion
1

Introduction

The new fora provide to us two amazing tools to express ourselves with efficiency. Text formatting may be a pain sometimes, but sometimes it is mandatory in order to help people read and understand our point of view.

Markdown Pros over HTML

Markdown offers portability and it is more open to non-technical people in contrast with HTML. Also, it’s standardized, easy to memorize and it forces simplicity in structure which enables easier writing and editing. On the other hand, HTML provides a controlled environment and some extra features.

Headers

We can use headers in our posts and threads simply with:

# Header1
## Header2
### Header3
#### Header4
##### Header5
###### Header6
Output

Header1

Header2

Header3

Header4

Header5
Header6

or alternatively,

Alternative Header1
===

Alternative Header2
---
Output

Alternative Header1

Alternative Header2

Bold, Italics and strikethrough

**Bold Text** 
__Alternative bold Text__

*Italics*
_Alternative Italics_

~~Strikethrough Text~~
Output

Bold Text
Alternative bold Text

Italics
Alternative Italics

Strikethrough Text

Numerated Lists & Bullet points

We can create numerated lists as follows:

1. Num1
2. Num2
3. Num3
Output
  1. Num1
  2. Num2
  3. Num3

However, Markdown generates the numbers’ order for us! Thus, we don’t need to count our items and focus on the text content.

1. Num1
1. Num2
1. Num3
Output
  1. Num1
  2. Num2
  3. Num3

On the other hand, bullet points can be called with various symbols, such as * , + and -

* Bullet 1
+ Bullet 2
- Bullet 3
Output
  • Bullet 1
  • Bullet 2
  • Bullet 3

Nested Lists & Bullet Points

Sometimes it is difficult to present our idea without subitems. We can create sublists using spaces. For example:

* Bullet 1
  * Subitem 1.1
* Bullet 2
  * Subitem 2.1
    * Subitem 2.1.1
      * Subitem 2.1.1.1
        * Subitem 2.1.1.1.1
Output
  • Bullet 1
    • Subitem 1.1
  • Bullet 2
    • Subitem 2.1
      • Subitem 2.1.1
        • Subitem 2.1.1.1
          • Subitem 2.1.1.1.1

Note #1: To create a subitem, we need to press space twice.
Note #2: We can use *, + and - to create bullet lists (as noted in the previous section).
Note #3: Subitems align automatically, so there’s no need to worry if you pressed one additional space.

Also, we are able to use this feature with numerated lists and a combination between numerated and bullet points.

* Bullet 1
  1. Subnumber1
     * Subbullet1
       1. Subnumber2
Output
  • Bullet 1
    1. Subnumber1
      • Subbullet1
        1. Subnumber2

Note: You only need to remember that you need spaces to create sublists. Then, you can just check the format in the preview.

Markdown let us to bullet or numerate our points and include descriptions:

* Bullet Title
  Description of the Bullet
     1. Number sub Title
     Description of the sub Number
Output
  • Bullet Title
    Description of the Bullet
    1. Number sub Title
      Description of the sub Number

Note: Descriptions need the same number of spaces with new subitems.
Suggestion: We can use Bold and Italics to let the readers distinguish the difference between Titles and Descriptions.

Alternatively, we can use Enter to split our Title and Description:

* Bullet1

  Description of Bullet1. Description of Bullet1. Description of Bullet1. Description of Bullet1. Description of Bullet1. Description of Bullet1. 

1. Number1

   Description of Number1. Description of Number1. Description of Number1. Description of Number1. Description of Number1. Description of Number1.
Output

  • Bullet1

    Description of Bullet1. Description of Bullet1. Description of Bullet1. Description of Bullet1. Description of Bullet1. Description of Bullet1.

  1. Number1

    Description of Number1. Description of Number1. Description of Number1. Description of Number1. Description of Number1. Description of Number1.

Links & Images (Trust Level 3 only)

Posting links and images is pretty easy with Markdown!

Link Format example:

[Overwatch Link](https://playoverwatch.com/)
Output

Overwatch Website Link

Image Format example:

![Overwatch Image](https://bit.ly/2HQ26jT)
Output

Overwatch Image

Note: The only difference is the symbol ! at the start.

Finally, we can include mouse hover comments or notes using "" after the links i.e.

[OW Link](https://playoverwatch.com/ "Link mouseover")
![OW Image](https://bit.ly/2HQ26jT "Image mouseover")
Output

Overwatch Website Link
Overwatch Image

Advanced Link & Image Formatting (References)

If we we write a long post or thread, sometimes it becomes a mess if we include links in the middle of the text. We can use the Markdown reference syntax to write and edit in a comprehensive manner.

[Markdown][1] is a [lightweight markup language][2].
It is designed so that it can be converted to [HTML][3].

[1]: https://en.wikipedia.org/wiki/Markdown "mouse hover comment"
[2]: https://en.wikipedia.org/wiki/Lightweight_markup_language
[3]: https://en.wikipedia.org/wiki/HTML
Output

Markdown is a lightweight markup language. It is designed so that it can be converted to HTML.

We can use Markdown reference syntax to include images as well:

The Markdown logo is:
![random text][logo]

[logo]: https://bit.ly/2JtphxA "mouse hover cool comment"
Output

The Markdown logo is:
random text

Tables

Sometimes, it is much easier to use tables instead of plain text. Below we can see the format of a standard Table:

| No.| Heroes | Playtime |
|----|--------|----------|
| #1 | Widowmaker| 50:00 |
| #2 | Winston| 42:00    |
| #3 | Mercy  | 38:00    |
| #4 |Soldier: 76|--------|
Output
No. Heroes Playtime
#1 Widowmaker 50:00
#2 Winston 42:00
#3 Mercy 38:00
#4 Soldier: 76 --------

Note: Spaces, the number of ----- and the alignment of the | do not matter.
Attention: There are only two crucial components to create a table. The inclusion of categories in the first line (i.e. | No.| Heroes | Playtime |) and the second line (i.e. |---|---|---|).

Also, we can align our columns:

| Column 1 | Column 2| Column 3|
|:---------|:-------:|--------:|
|   Left   |  Center |  Right  |
Output
Column 1 Column 2 Column 3
Left Center Right

Note: All we need to do is to include : at the direction we want to align the text i.e.
left is :---
center is :---:
right is ---:

Other Features

Code

We can use Markdown syntax to include inline code, single line brackets, boxes and quotes. Unfortunatelly, code highlights do not work in these fora, so I’ll include some ways to include code in your text:

```
multiline code
multiline code
```

~~~
multiline code
multiline code
~~~

single line code using 4 spaces

embedded `code` in text.

Output 
multiline code
multiline code

multiline code
multiline code

single line code using 4 spaces

embedded code in text.

Horizontal Lines

We can create horizontal lines by using *** and ___.

Ignore Markdown

We can use \ anytime to ignore Markdown. For example,
\* _Hello World!_ \* = * Hello World! *

Special Thanks

I gratefully acknowledge Dr4gon97’s initial effort to the original thread Forum HTML Tutorial, which enabled me to write a Markdown guide. Also, I would appreciate your feedback including grammar and syntactic mistakes.

9 Likes
2

nice this is very handy

1 Like
3

how have so few people seen this?

2 Likes
4

At that time there wasn’t the concept of pinning user topics, except Mercy 2.0 feedback. After this, I realized that several threads - including this - are going to be buried sooner or later and I created a new thread asking for pinning at least the HTML/CSS tutorial by Dragon and the overmoji cafe.

Thankfully, moderators listened to us and they pinned the two I mentioned, but this thread got buried by Mercy complains. :frowning:

However, I’m happy that some people still find it helpful. Thank you very much :blush: