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

[geoff.hom]

When writing a forum topic/reply, I want something visual to understand what formatting is possible. Hence this post.

This post focuses on what you can do with the formatting menu:

• How to use
  • When you want inspiration, scroll down and see if any formatting sparks joy.
  • For each example, I tried to hint how to reproduce that.

• In forum posts, you can mix and match using the formatting menu, Markdown, BBCode, and HTML.
  • a cheat sheet for Markdown: (a cheat sheet for formatting forum posts) (Markdown)
• For listings/profiles/reviews/feedback, it’s a totally different system. Long story short—there seem very few formatting options.

---

Going through the toolbar, left to right:

• (Quote whole post)

  • (easier to explain by replying to this post) (so see below)

• Strong (aka Bold)

• Emphasis (aka Italic)

• (Insert Hyperlink)

  • (Paste a URL)
    • https://forum.trustedhousesitters.com/t/how-to-add-a-listing-or-profile-link-to-your-forum-profile/8396
      • (this was done by pasting the URL) (optional title: blank)
    • link your TH listing/profile to your forum profile
      • (this was done by pasting the URL) (optional title: “link your TH listing/profile to your forum profile”)
  • (Type to search topics)
    • How to add a listing or profile link to your FORUM profile
      • (this was done by typing “link profile”) (then clicking on the appropriate/first topic)

• (Blockquote)

  • line 1
    line 2

    line 4

  • (select the lines you want in the blockquote) (then click the “Blockquote” button)

• Preformatted text (aka code) (aka monospace text)

  • example: one line
  • (multiline)

    • "lastName": "Smith",
      "age": 25,
      

    • (select the lines you want in the code block) (then click the “Preformatted text” button)
    • (note that a code block has formatting you may not want) (e.g., auto-coloring)

• (Upload)

  • 
  • (choose an image from your computer) (after uploading, hover over the image)
    • (to rename) (click the pencil icon)
    • (to scale) (click 100%, 75%, or 50%)
    • (to delete) (click the trash icon)
  • (you can also drag-and-drop images into the input pane/area)

• (Bulleted List) (aka unordered list)

  • line 1
  • line 2
  • (select the lines you want in the list) (then click the “Bulleted List” button)

• (Numbered List) (aka ordered list)

  1. line 1
  2. line 2
  • (select the lines you want in the list) (then click the “Numbered List” button)

• (Emoji :))

  • (browse, or search by name)
  • (can adjust skin tone for some emoji) (e.g., “People and Body” category)

• (Insert date / time)

  • 2022-11-29T06:00:00Z→2022-12-03T06:00:00Z
  • (we can’t post dates/listings in the forums, so probably not applicable)

Advanced (the last icon):

• (Hide Details)

  • Summary

    details go here
    line 2

  • (select the text you want to hide) (then click “Hide Details”)
  • (to show/hide the details) (user clicks the disclosure triangle)

• (Blur Spoiler)

  • the butler did it
    Darth Vader is …!

  • (select the spoiler text you want to blur) (then click “Blur Spoiler”)
  • (to show/hide the spoiler text)
    • (user hovers over text to unblur slightly)
    • (user clicks the text to unblur fully)
    • (user re-clicks the text to re-blur)

• (Build Poll)

  • (there are many poll options) (below is just one example)
  • (if need more help, reply here or make a new topic?)

• cats
• dogs
• cogs

[geoff.hom]

This is an example of quoting multiple parts of a reply.

@geoff.hom

Going through the toolbar, left to right:

• (Quote whole post)
  • (easier to explain by replying to this post) (so see below)

• (to quote part of a reply)
  • (select the text to quote)
    • (then click the “Quote” button that appears) (or press “q”) (or click “Reply”)
  • (can quote multiple texts/users in one reply)

@geoff.hom

what you can do with the toolbar (quote, bold, italic, etc.)

[geoff.hom]

This is an example of quoting an entire reply.

• (Quote whole post)
  • (can enter text above, like this)
  • (to quote whole reply) (click the “Quote whole post” button)

@geoff.hom

@geoff.hom

Going through the toolbar, left to right:

• (Quote whole post)
  • (easier to explain by replying to this post) (so see below)

• (quote part of a reply)
  • (select the text to quote)
    • (then click the “Quote” button that appears) (or press “q”) (or click “Reply”)

bonus tricks

• (bonus) (@mention)
  • @geoff.hom
  • (type @) (a list of people who have replied will show up) (max 6?)
    • (click someone to fill in their name)
    • (or start typing any member’s username) (case doesn’t matter)
      • (a filtered list will appear)
    • (the mentioned user will be notified/pinged) (unless they’ve muted the topic)

[geoff.hom]

Updating to cover more formatting options.

---

Discourse overall

The TH forums use Discourse. The official Discourse reference is below.

Supported formatting in posts (markdown, BBCode, and HTML)

It’s “official,” but it’s not necessarily complete. And it doesn’t give examples.

---

The formatting menu

When you make a new topic or reply to one, you see a formatting menu like this (red box):

• 

Examples of what each icon does are in the first post of this topic:

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

Bold with italic:

• example: Really want to emphasize this part.

• click italic first, then bold

Below the formatting menu, it gives more options:

• “Use Markdown, BBCode, or HTML to format. Drag or paste images.”

So if you want to add an image, you can just drag it in. Or copy-paste it in.

As for Markdown, BBCode, and HTML, read on.

---

Markdown

Examples of Markdown are in this topic:

• (a cheat sheet for formatting forum posts) (Markdown)

Tables

I want to explain tables more. First, a reference:

Add a table to your post using markdown

The easiest way to add a table is to:

1. Make it in another app, like Google Sheets.
2. Copy-paste the desired cells into your forum post.

Example:

• These cells in Google Sheets:
  

  

• become this Markdown:

  |Cats|Dogs|Equines|
  |—|—|—|
  |Tabby|Poodle|Donkey|
  |Siamese|Shiba Inu|Horse|

• which looks like:

  Cats	Dogs	Equines
  Tabby	Poodle	Donkey
  Siamese	Shiba Inu	Horse

You can play around with the Markdown to tweak the table.

For example:

• Blank cells, photos, emoji, and column alignment (left/center/right):

  Cats	Dogs
  	Poodle	Donkey
  Siamese	Shiba Inu	Horse

• That Markdown is:

  

  • The red box with all the --- determines the column alignment. Just use : as shown.

  • The donkey photo was tricky, because tables rely on the | (pipe) character, and a photo’s Markdown already includes a | (smaller red box). To get the photo into the table, we had to “escape” that | by adding the \.

• You can even have a one-column table:

  birds
  emu
  penguin

---

BBCode

Discourse supports only a subset of BBCode. For most of that subset, the equivalent can be done via the formatting menu or Markdown.

New stuff:

• underline

  • example: Let’s underline only this part.

  • Let's underline only [u]this part[/u].

• email

  • example: support@trustedhousesitters.com

  • [email]support@trustedhousesitters.com[/email]

  • However, you can also just paste an email address into the composer window, and it’ll format correctly.

---

HTML

See: (a cheat sheet for formatting forum posts) (the formatting menu) - #6 by geoff.hom

[geoff.hom]

---

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	cats dogs 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)
      

()

---

<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>.
      

()

---

<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:

  • 42. cats
    43. dogs
    44. 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:

  • 17. cats
    18. dogs
        1. Jack Russell Terrier
        2. Shiba Inu
        3. Corgi
    19. 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>
      

()

---

<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>
      

()

---

<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>
      

()

---

<sub> (subscript)

Use <sub> to make text subscript.

Example:

• Chemical formulas:

  • Come on in! The H₂O is fine.

  • How? Use <sub>:

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

()

---

<sup> (superscript)

Use <sup> to make text superscript.

Example:

• Exponents:

  • 3² = 9

  • How? Use <sup>:

    • 3<sup>2</sup> = 9
      

()

---