(a cheat sheet for formatting forum posts) (the formatting menu)

THS News & Feedback
6

HTML

When writing a post in the forums/Discourse, you can use some HTML tags. However, most formatting can be done via the formatting menu, Markdown, or BBCode.

A list of HTML tags in Discourse: Supported formatting in posts (markdown, BBCode, and HTML) - #6 by Canapin - users - Discourse Meta

A reference for all HTML tags: HTML elements reference - HTML: HyperText Markup Language | MDN

HTML tags that may be useful in Discourse are listed below. Click on a tag to jump to more info.

tag why example code
<br> (line break) more whitespace (line 1)


(line 2)		 (see below)
<kbd> (keyboard input) explain what keys someone should press To get “@,” press shift + 2. To get "@," press <kbd>shift</kbd> + <kbd>2</kbd>.
<ol> (ordered list) more options than Markdown
  1. cats
  2. dogs
  3. spotted owls
 (see below)
<ruby> (ruby annotation) East Asian characters (show how to pronounce) 明日 (Ashita) (see below)
<small> (small print) small print (e.g., legal) This is the offer.
(This is the fine print.)		 This is the offer.<br><small>(This is the fine print.)</small>
<sub> (subscript) chemical formulas H2O H<sub>2</sub>O
<sup> (superscript) exponents 32 = 9 3<sup>2</sup> = 9

<br> (line break)

Use <br> to add whitespace.

Examples:

  • No whitespace:

    • (line 1)
      (line 2)

  • 1 line of whitespace:

    • (line 1)

      (line 2)

    • How? Just add the extra line with the return key:

      • (line 1)

(line 2)

  • 2 lines of whitespace:

    • (line 1)


      (line 2)

    • How? Use <br>: 
      • (line 1)
<br>
(line 2)

  • 3 lines of whitespace:

    • (line 1)



      (line 2)

    • How? Use multiple <br>: 
      • (line 1)
<br><br>
(line 2)

(:top:)

<kbd> (keyboard input)

Use <kbd> to explain what keys someone should press.

Example:

  • You could write:

    • To get “@,” hold the “shift” key and press the “2” key.

  • Or instead:

    • To get “@,” press shift + 2.

    • How? Use <kbd>: 
      • To get "@," press <kbd>shift</kbd> + <kbd>2</kbd>.

(:top:)

<ol> (ordered list)

Use <ol> to create an ordered list. You can already create such a list via the formatting menu or Markdown. However, <ol> gives you more options.

Examples:

  • A simple numbered list:

      1. cats
      2. dogs
      3. spotted owls
    • How? Start with each item on a line: 
      • cats
dogs
spotted owls
      • Then, in the formatting menu, select “Numbered List.”

  • Start at an arbitrary number:

      1. cats
      2. dogs
      3. spotted owls
    • How? Use Markdown. Change the first number to your starting number: 
      • 42. cats
1. dogs
1. spotted owls
      • Note that the other numbers can be “1.”

  • Count down:

      1. cats
      2. dogs
      3. spotted owls
    • How? Use <ol> and the attribute “reversed”: 
      • <ol reversed>
  <li>cats</li>
  <li>dogs</li>
  <li>spotted owls</li>
</ol>

  • Use Roman numerals, uppercase:

      1. cats
      2. dogs
      3. spotted owls
    • How? Use <ol> and the attribute “type” with “I”: 
      • <ol type="I">
…

  • Use Roman numerals, lowercase:

      1. cats
      2. dogs
      3. spotted owls
    • How? Use <ol> and the attribute “type” with “i”: 
      • <ol type="i">
…

  • Use letters, uppercase:

      1. cats
      2. dogs
      3. spotted owls
    • How? Use <ol> and the attribute “type” with “A”: 
      • <ol type="A">
…

  • Use letters, lowercase:

      1. cats
      2. dogs
      3. spotted owls
    • How? Use <ol> and the attribute “type” with “a”: 
      • <ol type="a">
…

  • Nest lists. Also, combine uppercase letters, lowercase Roman numerals, starting at an arbitrary “number,” and counting down:

      1. cats
      2. dogs
        1. Jack Russell Terrier
        2. Shiba Inu
        3. Corgi
      3. spotted owls
    • How? You can nest <ol>. Also, you can combine attributes: 
      • <ol start="17", type="A">
  <li>cats</li>
  <li>
    dogs
    <ol reversed, type="i">
      <li>Jack Russell Terrier</li>
      <li>Shiba Inu</li>
      <li>Corgi</li>
    </ol>
  </li>
  <li>spotted owls</li>
</ol>

(:top:)

<ruby> (ruby annotation)

Use <ruby> to show how to pronounce East Asian characters.

Example:

  • The Japanese kanji for “tomorrow”:
    • 明日 (Ashita)
    • How? Use <ruby> and associated tags: 
      • <ruby>
  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>

(:top:)

<small> (small print)

Use <small> for small print, like copyright and legal text.

Example:

  • Legal text:

    • This is the offer.
      (This is the fine print.)

    • How? Use <small>: 
      • This is the offer. 
<small>(This is the fine print.)</small>

(:top:)

<sub> (subscript)

Use <sub> to make text subscript.

Example:

  • Chemical formulas:

    • Come on in! The H2O is fine.

    • How? Use <sub>: 
      • Come on in! The H<sub>2</sub>O is fine.

(:top:)

<sup> (superscript)

Use <sup> to make text superscript.

Example:

  • Exponents:

    • 32 = 9

    • How? Use <sup>: 
      • 3<sup>2</sup> = 9

(:top:)