🇨🇳 Discourse Post Formatting Guide Add some formatting to make posts more colorful

Sometimes, making small changes to a post can greatly improve its readability and interactivity! This article focuses on the “small changes” to post formatting.

It’s best to open the post editor and follow along now; the post editor has a built-in preview page:

Take a sip of water and stretch. Ready to open your post editor? Okay, let’s begin!



Headings

Add a # symbol before a line to convert its content into a heading. The number of # symbols corresponds to the heading level.

Input:

# Level 1 Heading
## Level 2 Heading
### Level 3 Heading
#### Level 4 Heading

Output:

:bulb: When a post has a lot of content and a certain structure, adding headings makes it easier for readers to understand the organization of the content, making the post clearer.

:bulb: Headings in a post automatically have links that lead to them (hover over the heading to see the link symbol :link: ), making it easy to quickly jump to a specific heading using a link.

:bulb: Note that there should be a space between the # symbol and the heading content.

:bulb: Some people might use bold text as headings. This is generally not recommended because bold text lacks the semantics, hierarchy, and built-in links of heading formats, nor can it prepare for the table of contents format introduced below.

:bulb: It is recommended to use a level 2 heading as the largest heading in a post, rather than a level 1 heading, because the level 1 heading has already been used for the main topic title.



Table of Contents

You may have noticed that this post has a table of contents. If you are using a mobile phone, you can open it by tapping the table of contents button in the bottom right corner. If you are using a computer, the table of contents appears on the right side of the screen.

When your topic post has headings, you can add a table of contents to it.

How to add: Ensure your post has some headings (these headings will be used to build the table of contents). In the editor, place the cursor on an empty line. Then click the button shown in the image below.

After clicking this button, a string of English symbols will appear in the editor:

<div data-theme-toc="true"></div>

These symbols are used to automatically generate the table of contents and will not be displayed in your published post, so do not delete them. Keep them and continue writing the post content. You will see the table of contents after publishing the post.

:bulb: The table of contents can display headings centrally, making it easy to quickly jump to the corresponding heading content. If your topic post has headings, adding a table of contents is a good choice!



Bold, Italic, Highlight

Input:

**Bold text** surrounded by a pair of double asterisks
*Italic text* surrounded by a pair of single asterisks
Add two special symbols around the text you want to <mark>highlight</mark>.

Output:
Bold text surrounded by a pair of double asterisks
Italic text surrounded by a pair of single asterisks
Add two special symbols around the text you want to highlight.

:bulb: Bold text is eye-catching and suitable for emphasizing important information.

:bulb: Italic text can also be used for emphasis, and sometimes for marking foreign words, special nouns, or proper nouns to distinguish them from the surrounding normal text.

:bulb: Highlighted text is also eye-catching. When to use it depends on your needs.



Quote

Add a > symbol before a paragraph to format it as a quote.
Input:

> White hairs float on green water, red palms paddle clear waves.

Output:

White hairs float on green water, red palms paddle clear waves.

A quote block can contain multiple paragraphs. Add a > symbol in the blank line between paragraphs.
Input:

> Content of the first paragraph.
>
> Content of the second paragraph.

Output:

Content of the first paragraph.

Content of the second paragraph.

:bulb: The quote format is often used to cite content from others, creative works, or other sources.

:bulb: The visual effect of a quote block makes the quoted content stand out, making it easy to distinguish between quoted text and the poster’s text at a glance.



Forum Content Quote

When you want to quote a piece of text from a forum post, you can use the following quoting method.
Output:

How to use:
Select the text you want to quote, and a “Quote” button will appear. Click it, and the editor will automatically open, generating the quote format for that text.

:bulb: When quoting/replying to a specific passage in a forum post, this type of quote clearly shows other forum viewers which user’s words you are quoting/replying to and allows them to view the context of the quoted content. This makes discussions clear.



Horizontal Rule

Enter three - symbols on an empty line to create a horizontal rule.
Input:

---

Output: Each heading in this post has a horizontal rule above it!

:bulb: The line above the horizontal rule must be an empty line, otherwise, some strange effects may occur (try it yourself).



Multiple Blank Lines

Do you want to add multiple blank lines between two paragraphs? It’s not intuitive here: if your input has multiple blank lines, the display will show at most one blank line. To force multiple blank lines, you need to enter the special character <br> in the blank line, as shown in the example below.
Input:

The content above, with two extra blank lines before the content below
<br>
<br>
The content below, with two extra blank lines after the content above

Output:
The content above, with two extra blank lines before the content below




The content below, with two extra blank lines after the content above



Footnotes

There are two types of footnote formats:
Inline Footnotes
Input:

A sentence that needs a footnote ^[Footnote content]
Another sentence that needs a footnote ^[Another footnote content]

Output:

A sentence that needs a footnote [1]
Another sentence that needs a footnote [2]

Non-Inline Footnotes
Input:

A sentence that needs a footnote [^1]
Another sentence that needs a footnote [^2]

[^1]: Footnote content
[^2]: Another footnote content

Output:



Hide Details

Example:
Hide details

Usage entry point:

:bulb: When you have a long section of content in your post that is relatively secondary, you can use this feature to hide that content.



Buttons for Quick Formatting

Some formatting can be added using buttons in the editor.



More Formatting

The above are introductions to some of the more important formatting options. Have you learned them? Explore other formatting options yourself.
If you have any questions, please leave a message in the forum feedback section. Happy posting!

References:


  1. Footnote content ↩︎

  2. Another footnote content ↩︎

6 Likes

Good good good :star_struck: Looking forward to more tutorials

2 Likes

@Dotila_Li
Could you please tell me how to set up the markdown catalog chapters for the slider on the right so that they can be displayed? Is there a plugin for this?


1 Like

This is the DiscoTOC - automatic table of contents theme-component

1 Like

Thanks!
That’s great!