[Tutorial] How to format your posts

[Joseph Tang]

Helpful?

Up

2

::

This is a quick overview on how to use the formatting options available on our forums to better format your posts. It is possible to use our forums without reading this, but if you want to include fanciful elements like:

headings

code

…or even simple things like bold, italics, and highlights, this post will tell you exactly how to achieve it.

Please read on…

Last updated: 13 September 2024

---

Table of Contents

1. Forum mark-up language
   1. Paragraphing quirks
   2. Code tags
2. Using Quicktags formatting
   1. Bold
   2. Italics
   3. Hyperlinks
   4. Block Quote
   5. Strikethrough
   6. Image
   7. Unordered List
   8. Ordered List
   9. List Items
   10. Code
   11. Close Tags
3. Other formatting options
   1. Headers
   2. Horizontal Rules
   3. Highlighting
   4. Code Blocks
4. Wrap up

---

1. Forum mark-up language

If you have posted on other forums before, you will be aware that different forums use different mark-up languages. Some use bbCode, others use Markdown. In our forums, we use plain ol’ HTML, with some special rules and minor markup quirks.

a. Paragraphing quirks

If you have written in HTML before, you will be aware that in HTML, to paragraph your text, you need to use the <p> tag, like so:

<p>Here is a paragraph.</p>
<p>This is a second paragraph.</p>

On our forums, you don’t have to do that. You simply put the text on separate lines — your text will automatically be paragraphed when you post your text.

Here is a paragraph.

This is a second paragraph.

b. Code tags

Also, unlike HTML, you can use the ` character whenever you want to display code, instead of using the <code> or <pre> tags. This will display the encapsulated text as code. More details can be found on the code section below.

---

2. Using Quicktags formatting

When making a post on our forums, you will find a Quicktags bar at the top of the text box. The Quicktags bar gives you access to the most common formatting options on our forums.

By clicking any of them, you will create an opening HTML tag. Clicking on the same button again will create a closing HTML tag.

Clicking the buttons once will create an open tag, <example>, but for the tag to function properly you will need a closed tag too.

Thus, after clicking any button, they will change to include a / to close their tags, </example>.

You can highlight your text by right-clicking and dragging before using Quicktags to immediately enclose the text with a complete open and closed tag of your choice.

a. Bold

Tag: <strong> </strong>
Example: Bolds text. You can use this to emphasize parts of your sentence.

b. Italics

Tag: <em> </em>
Example: Italicizes text. Similar to bolding, you can use this to denote lines or words to stand out.

c. Hyperlinks

Upon pressing this Quicktag, you will receive a new window to insert links into your selected text.
For this function, you will have to insert your link as a hyperlink, therefore you will need to apply it to a text.

You can also choose to have this hyperlink open up a new tab upon being clicked, or to load the link on the current page.

Tag: <a href="https://example"> </a>
Example: Attaches a link to your text.

d. Block Quotes

Tag: <blockquote> </blockquote>
Example:

Applies an indentation to your text and can be used for quotation of paragraphs and blocks of text.

e. Strikethrough

Tag: <del> </del>
Example: Deletes your text. Strikes through your text that can be used to mark a mistake, correction or words to be removed.

f. Image

Note that you may not necessarily use this Quicktag to post an image.
As of November 2023, you can now drop your Imgur link into the textbox with no need of tags to get your result.
Using the image link and the Quicktag in tandem will result in a failure to grab the image.

To post an image or video on your topic, you will need to upload it onto Imgur and paste the URL of the image onto the post. We have a short step-by-step guide for how to do this.

Upon clicking the Quicktag, you will have a prompt at the top of the screen to ask for the image link and the accompanying captions.

Tag: <img src="https://imgur link" alt="caption"/>
Example:
You can post singular images by using the individual image link rather thank the page link.
Note that you will need to include .png at the end of the link.
<img src="https://imgur.com/v8V4HbT.png" alt="Image button"/>

Or you can post the website link in it’s entirety without the use of the image tag.
Note that this link will not work with the Quicktag.
https://imgur.com/a/tDpmflP

View post on imgur.com

g. Unordered List

Tag: <ul> <li></li> </ul>
Example: Unordered Lists will create a list using bullet points.

Shopping List

• Milk
• Eggs
• Bacon

h. Ordered List

Tag: <ol> <li></li> </ol>
Example: Ordered Lists will create a list using ascending Numbers.

Steps

1. First Step
2. Second Step
3. Third Step

Note that upon the list being closed, it’s ascending count will stop and any other ordered lists created will not continue the previous count.
You can however choose at which number the Ordered List will start by using start="number",
<ol start="7"> </ol>.

Steps Part 2

7. First Step
8. Second Step

i. List Items

Tag: <li> </li>
Example: List Items must be contained within an Ordered or Unordered List for them to work as intended, they will list individual texts contained within the open and closed tags.

j. Code

Tag: `
Grave Accents (`), found on the same key as the Tilde (~) beside the “1” key.
Example: Can be used to highlight a small piece of code, like GameManager.Instance.GetComponent<AudioSource>().

Note: One advantage of using Grave Accents is that they allow you to include angle brackets (<>), which would otherwise be interpreted as HTML tags and removed if used within a <pre> block.

Because of this, Grave Accents do not support Quicktags inside them. However, Quicktags applied outside of or around the Grave Accents can affect the code inside.

We recommend that for extensive code blocks, use <pre>, which you can find more about in Code Blocks, and for inline code, use Grave Accents.

k. Close Tags

In the situation that you pressed any of the Quicktags once without highlighting any text, thereby creating an open tag,
using Close Tags will immediately recall the unclosed tags used and close them for you.

This will only work for Quicktags that have not been re-clicked to close the tags.
Written tags will not be closed by Close Tags.

---

3. Other formatting options

Outside of using quicktags, there are other HTML tags that you can employ to format your posts to your liking.

a. Headers

Header tags are used to make different styles of text to create headings for your texts.

Tags: <h1> </h1>, replace the number with any number from “1” to “6”, creating different headers of descending sizes.
Example:

Header 1 Example

Header 2 Example

Header 3 Example

Header 4 Example

Header 5 Example

Header 6 Example

b. Horizontal Rules

In our posts, any empty spaces are automatically removed, leaving a maximum of one line of space between each consecutive paragraph of texts.

Thus, we can use horizontal rules to create extra space for better readability.

Tag: <hr>

Example:
<hr> creates a space between texts, as well as draws a thin line

---

within the extra space created.

c. Highlighting

Highlights creates a text highlight when used.

Tags:
Yellow:<mark> </mark>,
Green:<mark class="green"> </mark>,
Red:<mark class="red"> </mark>.

Example:
Yellow highlight
Green highlight
Red highlight

d. Code Blocks

We use Code Blocks to contain chunks of code. These blocks compact codes to conserve space on the page, allowing for easier navigation of the code.

Tag: <pre> </pre>

Example:

    void Start()
    {
        //You can highlight inside these code blocks

        //You can Strikethrough inside these code blocks, automatically highlighting it red.

        //You can use Quicktags inside these code blocks

        // Grave Accents are not able to be used in Code Blocks.

        // Because tags can be used inside code blocks, It is not possible to type out arrow brackets for code.
        GetComponent();
    }

---

4. Wrap Up

There are a bunch of different tools we can use to make formatting our posts better on the blog, and I hope that this quick rundown of how they look like, how to use them and where to do it, gives you a better understanding of such formatting. Thank you for reading, and I hope this helps you.

• Terence
• kyle

have upvoted this post.

[Author]

Posts