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 here 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.
- Start and End
- Basic Syntax Formatting
- Content Alignment
- Hyperlinks and Images
- HTML Anchors
- 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.
They are surrounded by angle brackets < and >. End tag is identical to the Start tag except it has / before the tag.
Is done using the same syntax again at the end without the need of adding an additional character to define its formatting end.
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. For example:
<small> <b> <ins> <small> Is it me or everything is getting smaller? </small> </ins> </b> </small>
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.
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.
All heading syntax examples from largest to smallest
HTML: i or em | Markdown: * or _
HTML: b or strong | Markdown: ** or __
HTML: s or strike | Markdown: ~~
HTML: code | Markdown: `
Inserted and Deleted
HTML: ins for Inserted, del for Deleted Text
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.
HTML: blockquote | Markdown: >
HTML: <blockquote>Developer Comment: How about now?</blockquote> Markdown: >Developer Comment: How about now?
Developer Comment: How about now?
<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.
Note: Can be used for text aside of a single character.
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”
Markdown: ~~~~ or ```
Note: 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).
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.
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:
- Justified: Each line will be spaced to have the exact same width as the others, no matter the length of the text.
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
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.
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.
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.
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:
- 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.
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:
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.
Can be done by adding * followed by a space.
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
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:
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!
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 are useful if you want to show some data correlation.
|table||Defines a Table in HTML|
||—|||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 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:
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
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 someone else, you can always follow this guide I made, its still up to date, found here.
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.
- , paste the code in the search engine box on top of your screen, then copy it from the search box, should remove any HTML entities that were copied.
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.