Quote Callouts!

Callouts

Callouts are a great way to highlight content and add notes, warnings, or other special messages to your posts.

Usage

To create a callout, add [!type] to the first line of a quote, where type is the type identifier. The type identifier determines how the callout looks and feels. To see all available types, refer to Supported types.

:information_source: The type identifier is case-insensitive.

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

Table Content

  1. Custom Title
  2. Foldable Callouts
  3. Nested Callouts
  4. Supported Default Types

Custom title

By default, the title of the callout is its type identifier in title case. You can change it by adding text after the type identifier:

> [!question] Custom Label 🤗
> Callouts labels can be customized.

> [!abstract] [date=2032-12-22 timezone="Europe/Paris"]
> They can also contain special inline formatting like dynamic dates.

[!question] Custom Label :hugs:
Callouts labels can be customized.

[!abstract] 2032-12-21T23:00:00Z
They can also contain special inline formatting like dynamic dates.

You can also create title-only callouts:

> [!success] solved.

[!success] solved.

Foldable callouts

You can make a callout foldable by adding a plus + or a minus - directly after the type identifier.

  • “+” expands the callout by default
  • “-” collapses it instead
> [!todo]- My Todo List
>
> - [x] Write documentation
> - [ ] Add tests
> - [ ] Review code

> [!todo]+ My Expanded Todo List
>
> - [x] Create repository
> - [ ] Setup CI/CD
> - [ ] Deploy to production

[!todo]- My Todo List

  • Write documentation
  • Add tests
  • Review code

[!todo]+ My Expanded Todo List

  • Create repository
  • Setup CI/CD
  • Deploy to production

1000008273

Nested callouts

You can nest callouts in multiple levels.

> [!question] Can callouts be nested?
>
> > [!todo] Yes!, they can.
> >
> > > [!example] You can even use multiple layers of nesting.

> [!tip]
> Here's a helpful tip
>
> > [!info]
> > With some additional information
> >
> > > [!example]
> > > And a nested example
>
> Back to the main tip

[!question] Can callouts be nested?

[!todo] Yes!, they can.

[!example] You can even use multiple layers of nesting.

[!tip]
Here’s a helpful tip

[!info]
With some additional information

[!example]
And a nested example

Back to the main tip

Supported default types

You can use several callout types and aliases.
Each type comes with a different background color and icon.

:information_source: You can create your callouts or manage the default ones.
See the callouts setting.

:information_source: Any unsupported type defaults to the note type. See Default Fallbacks section for more information.

:information_source: The type identifier is case-insensitive.

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

Callout examples 2