Most of the time, the editors buttons are all we need to format the text we write on the forum. But there are many other options you can use to embellish your posts, add clarity to your texts or change the layout of your posts.
So here’s a list of tags and codes you need to format your text manually, or to insert those other options.
NOTE: I still have content to add to the list. After I’m done I’ll give credit to all the sites where I found the documentation for this page.
Table of Content
Mardown & BBCode formating
Text Formatting
Font color
Headings
Lists
Tables
Blockquotes
Codes Formatting
Horizontal line
Additional features, using HTML tags
Table of Content
Mimic keyboard keys or buttons
Small text
Abbreviations
Insertions and deletions
Non-breaking space
Tabulation
Text Formatting
BOLD
| Syntax | Result | |
|---|---|---|
**bold** |
= | bold |
__bold__ |
= | bold |
ITALIC
| Syntax | Result | |
|---|---|---|
*italic* |
= | italic |
_italic_ |
= | italic |
BOLD & ITALIC combo
| Syntax | Result | |
|---|---|---|
_**italic and bold**_ |
= | italic and bold |
STRIKE-THROUGH
| Syntax | Result | |
|---|---|---|
~~strike-through~~ |
= |
Alternatively, BBCode syntax can be used
| Syntax | Result |
|---|---|
[b]bold[/b] |
bold |
[i]italic[/i] |
italic |
[u]underline[/u] |
underline |
[s]strike-through[/s] |
strike-through |
Font color
Font color is not natively supported by the forum.
Headings
Lists
Unordered list
- Item one
- item two
- Item three
Syntax
Example of unordered list
* Item one
* item two
* Item three
OR
Example of unordered list
- Item one
- item two
- Item three
Result
Example of unordered list
Ordered list
- Item one
- Item two
- Sub-item one (sub-lists are offset by three spaces)
- Sub-item two
- Item three
- Item four
Syntax:
Example of ordered list
1. Item one
2. Item two
* Sub-item one (sub-lists are offset by three spaces)
* Sub-item two
3. Item three
4. Item four
Result:
Example of ordered list
Tables
NOTE - The easiest way to get a table into the forum is to create a table in an spreadsheet, then copy & paste that table into the editor window. Discourse (the forum) natively handles the format change and makes creating a table much easier. Excel and Google Sheets work great using this method.
- First line = Column tittles.
- Second line = Separator.
A table needs at least these first two lines to exist:
Syntax:
|Name|Occupation|Brith place|
|-|-|-|
|John|Taxi driver|Chicago|
|Andrea|Writer|Milan|
|Guillaume|Developer|Paris|
Result:
| Name | Occupation | Place of birth |
|---|---|---|
| John | Taxi driver | Chicago |
| Andrea | Writer | Milan |
| Guillaume | Developer | Paris |
Blockquotes
You can manually create quotes by adding a greater than sign (>) in front of a line.
Example #1 - Short line of text:
Syntax
> This is a quote.
Result
This is a quote.
Example #2 - Long line of text (without line breaks):
Syntax:
> This is a long line of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget laoreet nulla, a viverra sapien. Quisque ante libero, commodo vel erat nec, dictum aliquet lorem. Aliquam id lorem non nibh tempus blandit gravida eget massa. Vestibulum tristique imperdiet tincidunt. Fusce dignissim suscipit convallis.
Result:
This is a long line of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget laoreet nulla, a viverra sapien. Quisque ante libero, commodo vel erat nec, dictum aliquet lorem. Aliquam id lorem non nibh tempus blandit gravida eget massa. Vestibulum tristique imperdiet tincidunt. Fusce dignissim suscipit convallis.
Code Formatting
Inline code formatting
Use backticks (`) before and after a section of codes
Do Alt+NumPad 9+NumPad 6 to type a backtick.
Syntax:
ˋfor (var i = 0; i < 6; i ++)ˋ
Result:
for (var i = 0; i < 6; i ++)
Variant - Inside a normal line of text:
Syntax:
normal text ˋpreformat textˋ. normal text
Result
normal text preformat text normal text.
NOTE: If you use it for an entire paragraph or a long line of text or code, the width of the text will not exceed the width of the page and will be displayed on multiple lines. Like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in maximus felis, ut tempor augue. Nunc sit amet nulla quis enim posuere aliquam eleifend vel diam.
To show the entire text in one single line (with a scroll bar), instead of using the backticks, create an blank line, then place 4 blank spaces before the text. It will look like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in maximus felis, ut tempor augue. Nunc sit amet nulla quis enim posuere aliquam eleifend vel diam.
Block of code with multiple lines
Insert 3 backticks before and 3 backticks after your lines of code
Syntax:
ˋˋˋ
p { font-family: ‘Arial’; color: #ffffff; }
table { border-width: 0px; border-color:#000000; }
td { border-width: 1px; border-color:#000000; }
ˋˋˋ
Result:
p { font-family: 'Arial'; color: #ffffff; }
table { border-width: 0px; border-color:#000000; }
td { border-width: 1px; border-color:#000000; }
Horizontal line
Three consecutive dashes `---`, asterisks `***` or underscores `___` placed under a blank line will create a horizontal line
Additional features, using HTML tags.
Add a Table of Content
This is not a native feature of the Discourse forums, but you can manually create a table of content by using HTML headings and ID instead of the `##` Markup heading syntax. Make sure the ID is always prefixed with *heading- -*Example of a table of content
Syntax
### The Hobbit: Table of Content
[Chapter 1 - An Unexpected Party](#heading--first-header)
[Chapter 2 - Roast Mutton](#heading--second-header)
[Chapter 3 - A Short Rest](#heading--third-header)
[Chapter 4 - Over Hill and Under Hill](#heading--fourth-header)
<h3 id="heading--first-header">Chapter 1 - An Unexpected Party</h3>
Bla bla bla
<h3 id="heading--second-header">Chapter 2 - Roast Mutton</h3>
Bla bla bla
<h3 id="heading--third-header">Chapter 3 - A Short Rest</h3>
Bla bla bla, and bla
<h3 id="heading--fourth-header">Chapter 4 - Over Hill and Under Hill</h3>
Bla bla end
Result:
The Hobbit: Table of Content
Chapter 1 - An Unexpected Party
Chapter 2 - Roast Mutton
Chapter 3 - A Short Rest
Chapter 4 - Over Hill and Under Hill
Chapter 1 - An Unexpected Party
Bla bla blaChapter 2 - Roast Mutton
Bla bla blaChapter 3 - A Short Rest
Bla bla bla, and blaChapter 4 - Over Hill and Under Hill
Bla bla end
Mimic keyboard keys or buttons
| Syntax | Result |
|---|---|
<kbd>A</kbd> |
A |
<kbd>Shift</kbd> |
Shift |
<kbd>Ctrl</kbd>+<kbd>C</kbd> |
Ctrl+C |
Small text
| Syntax | Result |
|---|---|
| Normal text | Normal text |
<small>Small text</small> |
Small text |
Abbreviations
This tag allows to define abbreviations, and the long form will be shown when hovering over the text.Syntax
The new <abbr title="Video User Interface">VUI</abbr> is very useful.
Result
The new VUI is very useful.
Insertions and deletions.
Used to explicitly show changes made to a text or to propose change to a text. I guess this can be used also to highlight text. It has nothing to do with a post’s edit history feature.Syntax
A Shotcut project is saved as a <del>.mtl</del> <ins>.mlt</ins> file
Result
A Shotcut project is saved as a .mtl .mlt file
Non-breaking space
-
Useful to create blank spaces inside your text, or vertical space when placed on its own line.
Syntax
Line starting with two blank spaces
Line starting with one blank space
Line with no blank space
Result
Line starting with two blank spaces
Line starting with one blank space
Line with no blank space
Tabulation
Mimic tabulation by using list tags like <ul></ul> or <ol></ol> without their <li> elements. This is useful to indent an entire paragraph or an image.
NOTE: Always put a blank line under <ul> and under </ul>
Syntax
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus tristique nisl, vulputate mattis lacus molestie vel. Vivamus vulputate elit nibh, id finibus purus egestas sit amet.
<ul>
Vestibulum venenatis mollis varius. Nullam eleifend sollicitudin odio, viverra venenatis ante venenatis ac.
</ul>
Pellentesque eleifend magna id metus vestibulum porta.
Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum maximus tristique nisl, vulputate mattis lacus molestie vel. Vivamus vulputate elit nibh, id finibus purus egestas sit amet.
Vestibulum venenatis mollis varius. Nullam eleifend sollicitudin odio, viverra venenatis ante venenatis ac convallis mauris.
Pellentesque eleifend magna id metus vestibulum porta. Etiam tincidunt, est et pellentesque gravida, lacus urna convallis mauris, non condimentum mauris lorem quis ligula.
