The colorful boxes are Quote Callouts

I’m psyched that we can add Obsidian-style Callout boxes to Forumosa. Here is a quick guide below, and you can read more about them on Discourse Meta

Here is how you use it

When you enter this…

> [!tip] 
> Use `code snippets` to enhance readability. They provide clarity and precision.

… it looks like this:

[!tip]
Use code snippets to enhance readability. They provide clarity and precision.

Replace the word “tip” in the example above with one of the types in the table below

Types of Callout Boxes

Type Description Aliases
note For general notes and information -
abstract For summaries or abstract sections summary, tldr
info For informational content -
todo For task lists or todo items -
tip For tips and important information hint, important
success For success messages check, done
question For questions and FAQs help, faq
warning For warnings caution, attention
failure For failure notices fail, missing
danger For danger or error messages error
bug For bug reports or known issues -
example For examples -
quote For quotes cite

And here is what each type of callout box looks like:

[!note`]
For general notes and information

> [!note]
> Add text here

[!abstract]
For summaries or abstract sections - and you can also use summary or tldr

> [!abstract]
> Add text here

[!info]
For informational content

> [!info] 
> Add text here

[!todo]
For task lists or todo items

> [!todo] 
> Add text here

[!tip]
For tips and important information - and you can also use hint or important

> [!tip] 
> Add text here

[!success]
For success messages - and you can also use check or done

> [!success] 
> Add text here

[!question]
For questions and FAQs - and you can also use help or faq

> [!question] 
> Add text here

[!warning]
For warnings - and you can also use caution or attention

> [!warning] 
> Add text here

[!failure]
For failure notices - and you can also use fail or missing

> [!failure] 
> Add text here

[!danger]
For danger or error messages - and you can also use error

> [!danger] 
> Add text here

[!bug]
For bug reports or known issues

> [!bug] 
> Add text here

[!example]
For examples

> [!example] 
> Add text here

[!quote]
For quotes - and you can also use cite

> [!quote] 
> Add text here

[!tip] Finally: Custom Titles
By adding a some text to that first line, you can custom label the Callout Box

> [!tip]  Finally: Custom Titles
> By adding a some text to that first line, you can custom label the Callout Box

Some examples of Callout Boxes being used

3 Likes

Don’t forget that when you hover your mouse over a code snippet, a tiny copy button appears in the upper right corner of the code box, so you can easily capture the code for pasting later in your post

See the copy button in the screengrab below?

1 Like