Extensive Guide to Forum Syntax

General Discussion
1

Welcome to the Extensive Guide to Forum Syntax in this guide you will learn all you need to know about formatting your topics to be well detailed and high quality, if you have been long enough on the forums you might have seen some of those being posted in General Discussion and Hero and Skin Suggestions using HTML or Markdown format, otherwise welcome to the forums, hope you find this thread helpful in your future endeavors.

Guide Content:

  1. Start and End
  2. Basic Syntax Formatting
    Click for more Syntaxes
  3. Content Alignment
  4. Hyperlinks and Images
  5. Lists
  6. Tables
  7. HTML Anchors
  8. Frequently Asked Questions

Start and End

Start and End are the basics of syntax formatting, it basically defines the start point of formatting the content until its end.

In HTML:

They are surrounded by angle brackets < and >. End tag is identical to the Start tag except it has / before the tag.

In Markdowns:

Is done using the same syntax again at the end without the need of adding an additional character to define its formatting end.

Examples:

HTML: <b>Hello, world!</b>
Markdown: **Hello, world!**

Results in: Hello, world!

Start and End for each syntax must be opened and closed like parentheses in math. For example:

HTML: <i> <b>Hello, world!</b> </i>
Markdown: _**Hello,world!**_

Are correct! âś…

However…

HTML: <i> <b>Hello, world!</i> </b>
Markdown: _**Hello,world!_**

Are incorrect! ❌

Keep in mind you can stack the same tags multiple times and will still work too though doing so has sometimes no additional impact. For example:

Is it me <small>or everything <small>is getting <small>smaller? </small> </small> </small>

Results in: Is it me or everything is getting smaller?

Basic Syntax Formatting

These are the basics of all basics, like Bold and Italic, or Big and Small.

Here is a list of some basic syntaxes you could use to improve your post.

Heading

By default they take an entire row, there’s 6 types of Headings,

HTML: h1 being the biggest while h6 being the smallest.
Markdown: # being the biggest while ###### being the smallest.


Italic

HTML: i or em | Markdown: * or _


Bold

HTML: b or strong | Markdown: ** or __


Strikethrough

HTML: s or strike | Markdown: ~~


Code

HTML: code | Markdown: `


Inserted and Deleted

HTML: ins for Inserted, del for Deleted Text


Abbreviated

HTML: abbr
Attribute: title
Note: Used specifically to show full text behind an acronym, only works on PC by hovering over it


Bigger and Smaller

HTML: big for Bigger, small for Smaller.
Note: The Smaller tag can be stacked for even way smaller text.


Superscript and Subscript

HTML: sup for Superscript, sub for Subscript.


Hidden and Visible

HTML: details, summary
Attribute: open (By default its closed)
Note: summary should always be inside of details start and end tag.


Block Quote

HTML: blockquote | Markdown: >

HTML: <blockquote>Developer Comment: How about now?</blockquote>
Markdown: >Developer Comment: How about now?
Developer Comment: How about now?

Line Breaker

HTML: <br/>


Horizontal Line

HTML: <hr/> | Markdown: --- or ***
Note: Due to a bug, sometimes the Horizontal Line may not render with the content, its advised to replace it with an image horizontal divider, unfortunately this solution can work for Trust Level 3 users only. :frowning:


Keyboard

HTML: kbd
Note: Can be used for text aside of a single character.


Preformatted

HTML: pre


Backslash Escapes

Markdown: \

Backslash Escapes stops syntaxes from rendering and instead behave like normal text, very useful when you want to react with text emoticons like the shrug or simply telling others how to format without mentioning “remove space in < b> to make the text bold”


Code Block

Markdown: ~~~~ or ```
Note: [Optional] Syntax Highlighting is available, this can be done by adding on the start the specification of the language (e.g html, css, js, diff, etc).


Inline Frame

HTML: iframe
Used to embed another document within the topic, not all Inline Frames work, and some of the provided styling is limited specifically to avoid security breaches in the forums.

Content Alignment

Requires the div tag with the attribute align.

Content Alignment is a unique way to align the content of your post, how do you want it to be seen by the users? Do you like it being centered? maybe on the right? HTML provides that just for you!

There’s 4 different options when it comes to alignment in HTML:

  • Left
  • Right
  • Center
  • Justified: Each line will be spaced to have the exact same width as the others, no matter the length of the text.

Left:

Right:

Center:

Justified:

Keep in mind this isn’t just only for text, everything can be aligned.

The most important thing you should take note of is that div tags and the content inside will take an entire row, in that case multiple div tags will be forced to be aligned vertically instead of next to each other.

Vertical alignment in that case is mostly useful in Tables (discussed down below) when it comes to text and images where you want the image above/below the text.

Hyperlinks and Images

Hyperlinks

Not all links are allowed for low Trust Level users but the following are white listed to anyone to post regardless of what level they are:

  • Video sites like Youtube and Twitch.
  • Mainstream Social Medias like Facebook, Reddit and Twitter.
  • All Official Blizzard Entertainment Websites.
  • It is advised to give some of the unmentioned sites a try to see if they bypass the filter or not because we don’t really know which is allowed and which is not.

If links were simply posted without syntax used, Markdown will automatically make it clickable and try to preview the link if possible, depending on which preview it supports which as an example can be:

  • Title and Description for Reddit and Twitter.
  • Playing videos straight from the forums for Youtube, Streamable or Discord.
  • Previewing images as long the link directly goes to the image and ends with a certain image format (png, jpg, gif, etc).

With that being said:

In HTML: Can be created with the use of a tag and they require the attribute href.
In Markdown: Can be created by covering text with square brackets next to a link covered in Parentheses ().

Hyperlinks can also work with Images (discussed down below) and many other Forum Syntaxes.

Hashtags

There isn’t much to discuss here, similar to Hyperlinks you can link to Forum Categories. Simply write down #name of the category and it should automatically create a link to that category.

Images

As mentioned above, Images also fall into the Trust System that this forum has, currently only Trust Level 3 users can post images and use the syntaxes provided down below.

HTML:
Requires the img tag while also has many attributes, one being mandatory while the others are optional.

Unlike other tags, you don’t need to write </img> at the end of the tag, instead, we can add / at the end of the start tag. Example: <img />

Attributes:

  • src - The source of the image, this attribute must be added while keep in mind that the link should end with an image type, like: .png. .jpg, .jpeg, .gif and many more.
  • alt - When the image fails to load or the image in the following is no longer found or deleted, it will display text in its place instead.
  • width/height - Specify and set the height/width of the image in pixels or with a percentage.
  • title - Adds on hover title for the image, keep in mind this also gives the image a name to the larger ones and will replace the link_string.imagetype name with title attribute.

As a reminder the src is only required to run the img tag, however not specifying height or width will result in the image being automatically adjusted to its original resolution.

Markdown:
Similar to Hyperlinking text (discussed above) you need to additionally add ! at the beginning to specify that the following is an image but also the brackets must not cover any sort of text, the brackets will act as the attributes holder for alt and width/height that were discussed above in the HTML section.

Fortunately Images in Markdown supports all of the attributes mentioned above which are used in as the following:

![alt|widthxheight](link-to-the-image.png “title”)

Lists

A great way to organize your content and are pretty much how to make any sort of list!

Each list item must enclosed in a list item tag li.

In Markdowns:

Can be done by adding * followed by a space.

Unordered:

An Unordered list, to create one we use ul in HTML.

In Markdown however a simple * followed by a space will also create an unordered list.

HTML:
<ul>
<li>Starcraft</li>
<li>Overwatch</li>
<li>Diablo</li>
<li>Warcraft</li>
<li>Nexus</li>
</ul>

Markdown:
* Starcraft
* Overwatch
* Diablo
* Warcraft
* Nexus

Ordered:

HTML: ol | Markdown: 1. or 1), both should be followed by a space.

HTML:
<ol>
<li>Starcraft</li>
<li>Overwatch</li>
<li>Diablo</li>
<li>Warcraft</li>
<li>Nexus</li>
</ol>

Markdown:
1) Starcraft
2) Overwatch
3) Diablo
4) Warcraft
5) Nexus

The ol tag has an attribute called start which can be used to specify from which number to start aside of number 1. For example:

<ol start=6>

Results in:

On the other hand, in Markdowns: You can simply specify the first number to what ever you want and it will act like the start attribute! :smile:

Nested Lists:

In HTML: By adding ul tags inside an li tag.
In Markdown: Done by adding double spaces behind * as long there’s another listing above it that does not have double spaces behind the *.

Note: Its very unclear if nests work with ordered lists or not.

HTML: 
<ul>
   <li>Tracer 
      <ul>
         <li>Blink (Q)<ul><li>Cooldown: 9 Seconds.</li></ul></li>
         <li>Melee (W)<ul><li>Cooldown: 8 Seconds.</li></ul></li>
         <li>Recall (E)<ul><li>Cooldown: 30 seconds.</li></ul></li>
         <li>Pulse Bomb (R)</li>
         <li>Reload (D)<ul><li>Cooldown: 1 second.</li></ul></li>
      </ul>
   </li>
</ul>

Markdown:
* Tracer
  * Blink (Q)
    * Cooldown: 9 Seconds.
  * Melee (W)
    * Cooldown: 8 Seconds.
  * Recall (E)
    * Cooldown: 30 Seconds.
  * Pulse Bomb (R\)
  * Reload (D)
    * Cooldown: 1 Second.

Tables

Tables are useful if you want to show some data correlation.

Tag Description
table Defines a Table in HTML
tr Table Row
th Table Header
td Table Data

In Markdown:

Syntax Description
|| Table Data
|—| Table Header Row
—: or :— or :—: Defines the column alignment to right, left or center. 

HTML:
<table>
<tr>
<th>Hero</th>
<th>Level</th>
<th>Games Played</th>
</tr>
<tr>
<td>Tracer</td>
<td>45</td>
<td>215</td>
</tr>
<tr>
<td>D.Va</td>
<td>39</td>
<td>170</td>
</tr>
<tr>
<td>Li-Ming</td>
<td>35</td>
<td>152</td>
</tr>
</table>

Markdown:
|Hero|Level|Games Played|
|:---|:---|:---|
|Tracer|45|215|
|D.Va|39|170|
|Li-Ming|35|152|

HTML Anchors

HTML Anchors allow users to jump between sections of a very long post, they are similar to “Contents” that can be found on many wikis or Patch Notes, think of it like a quick way to navigate, of course not a lot of people use this feature but its a nice touch to add.

To create one, you need to add the attribute name into an a tag.

Make sure its above the Paragraphs title. Example:

<a name="bookmarkname"></a>
<h1>Name of a Paragraph</h1>

Now we need to create a link so it can direct the user into that section of the page, to do so create a link with the following

<a href="#bookmarkname">Name of the Paragraph</a>

As an example, we are gonna create an anchor that directs us to the Content Guide section found at the top of the guide,

First thing first we add on top of the Guide Content the following:

<a name="anchor"></a>

Now we create a link to direct us back to the Guide Content:

<a href="#anchor">HTML anchor</a>

And that’s it! The following should direct you back to the Guide Content section: HTML anchor

FAQ

What are Trust Levels?

Trust Levels are a system designed through the Discourse Software to those who are continuously active, all users start on Level 0 and can go up to Level 3, the higher you go, the less restrcitions you will have when posting which are:

  • Posting more comments in a day.
  • Liking more comments in a day.
  • [Trust Level 3] The ability to post images and any None white listed links.
What are the requirements for Trust Levels?

Admins can change the requirements for those levels, however from personal experience it seems it follows the default requirements with very little change at all, for more details of the requirements read Understanding Discourse Trust Levels.

How do I know my current Trust Level?

As of March 20th 2020, you can by just checking your profile.

Here’s a Legend to follow when it comes to each Trust Level name:

  • New => Trust Level 0
  • Visitor => Trust Level 1
  • Member => Trust Level 2
  • Regular => Trust Level 3
  • Leader => Trust Level 4 (The only way to ever get this is through being manually promoted by staff)

If by any reason this gets disabled or you wanna check for yourself, you can always do the following:

  1. Take the link below and replace [name] and [ID] with your Blizzard Name.
https://us.forums.blizzard.com/en/heroes/u/[name]-[ID].json

  1. Open the link, this will show public and private (if you are the owner) data in json format.

  2. Open a text search engine (Ctrl + F) and type trust_level.

  1. Each one of these trust_level has a number attach to it like _0, _1, _2 and _3.

  2. The one with the highest number is your current Trust Level, so if its trust_level_2 is the highest then you are Trust Level 2.

So I formatted my topic and bugs started appearing, how do I fix it?

If you are mixing Markdown and HTML together then tough luck this won’t work, it is very advised to use one certain type of format and do not mix with many or else you will have a hard time once you are about to polish it or anything, in short, DO NOT MIX MARKDOWN AND HTML OR (the not documented) BBCODE together.

Otherwise please let me know here so I can at least do couple of tests.

I copy and pasted a template from here and it pasted something else completely, how do I stop that?

When copying code things like < and > will be replaced with HTML entites which do not work in formatting, to avoid that, paste code blocks as Plain Text:

  • Right Click and press “Paste as Plain Text”
  • Instead of Ctrl + V press Ctrl + Shift + V to paste as plain text.
  • Mobile Users, hold down where you want to paste and click “Paste as Plain Text” popup.

Thank you

Thank you for reading this guide, if you have any questions or something specific you didn’t understand, please feel free to post down, I look forward to what many users can come up with this info. :smile:

52 Likes
2

My God

2 Likes
3

This is super handy! Thank you for the tips!

3 Likes
4

Yes!

We shall chat like this from now on.

4 Likes
5

Oh no what have you done Sami!:rofl:

3 Likes
6

I did a good thing, its up to the people how they use it.

Also there’s pre tag command that I forgot to add,makes 

text looks like it has a code font.
1 Like
8 
 text2meme
16

Ah, awake I see. Captured trying to cross the boarder?
Help, the bandits are coming!
You silly main hero! Press B to jump!
Excuse me, this is my home. Leave.
YOU HAVE DISGRACED OUR KING, NOW YOU DIE!!!

Oh yes. I am going to abuse this.

1 Like
17

You all need to tune it down with the keyboard tags lol.

18

To make us stop press NEVER.

1 Like
20

Bookmarked!

1 Like
21
Sami Normal forum poster
Writes extensive guides and walls of text :white_check_mark: Cuh-learly doesn’t
Lives in a desert :white_check_mark: ??? prolly some suburban neighborhood lol
Only bruiser/tank hero is D.Va :white_check_mark: Probably plays other bruisers and can play main tank
Pyrocynical :white_check_mark: …

:+1:

1 Like
22

I want to put this on my wall.

2 Likes
24

Oh, sorry. I just… found myself here.

1 Like
25

You have come to the right place.

1 Like
26

Dude! This is awesome! Thanks for this!

Incoming Smooch
1 Like
27

Will there be a quiz on this?

1 Like
28

Yes,

Write me down an entire table of Hotslog stats.

  1. The content focusing on:
  • Heroes
  • Picks
  • Bans
  • Wins

  1. Must be aligned in center.

  2. The table headers must be bold.

  3. Add link to the each hero page by href the superscript tag similar to those found in Wikipedia (text[1]).

  4. Table must be responsive both on PC and Mobile, including all Android screen sizes that exists.

  5. No markdowns

You have until Friday.

Hint:

example example
example example[1]
example example[2]
1 Like
29

It’s a shame I only just now discovered this guide. Having this on-hand would have been enormously helpful in writing previous effortposts, and I look forward to using it in the future.

Also, Sami! I shot you an add on Bnet 'cause I want to talk to you about the next effortpost I’m working on. It is very important and Ablative Armor related.

1 Like
30

Nice, don’t see any friend request though.

Nor here.

Incorrect ID maybe?

1 Like