Skip to content

Admonitions

Simple Admonitions

Admonition Title

Indent each line of admonition text with 4 spaces. Admonitions are specially marked topics that can appear anywhere an ordinary body element can. They contain arbitrary body elements and {inline styling} blocks. Typically, an admonition is rendered as an offset block in a document, sometimes outlined or shaded, with a title matching the admonition type.

markdown
!!! abstract "Admonition Title"
    **Indent**{ style="color: teal;" } each line of admonition text with 4 spaces. 
    Admonitions are specially marked "topics" that can appear anywhere an ordinary body 
    element can. They contain arbitrary body elements and `{inline styling}` blocks.
    Typically, an admonition is rendered as an offset block in a document, sometimes outlined or shaded, with a title matching the admonition type.

Note: Here’s an admonition containing only its bold-faced title text all on a single line.

And this is a regular blockquote, prefixed with >, not an admonition in a box.

markdown
!!! note "**Note:**{ style='color: blue;' } Here's an admonition containing only its bold-faced title text all on a single line."
> And this is a regular `blockquote`, prefixed with `>`, not an ***admonition*** in a box.

Collapsible Admonitions

Collapsible admonitions show a right-caret icon on the callout box so that the text area can be opened and closed by the user. To make an admonition callout collapsibile, substitute three question marks for the leading exclamation marks: $$$ instead of !!!.

The pymdownx.details extension adds the collapsible option. Enable it in the zensical configuration file:

zensical.toml
[project.markdown_extensions]
pymdownx.details = {}

Default closed state

This Collapsible Admonition defaults to the closed state.

Indent admonition text with 4 spaces. Admonitions are specially marked topics that can appear anywhere an ordinary body element can. They contain arbitrary body elements. Typically, an admonition is rendered as an offset block in a document, sometimes outlined or shaded, with a title matching the admonition type.

markdown
??? abstract "This Collapsible Admonition defaults to the closed state."
    **Indent**{ style="color: teal;" } admonition text with 4 spaces. Admonitions are specially marked "topics" that can appear anywhere an ordinary body element can. They contain arbitrary body elements.
    Typically, an admonition is rendered as an offset block in a document, sometimes outlined or shaded, with a title matching the admonition type.

Default opened state

Adding a + after the ??? token defaults to the expanded state:

This Collapsible Admonition defaults to the expanded state.

Indent admonition text with 4 spaces. Admonitions are specially marked topics that can appear anywhere an ordinary body element can. They contain arbitrary body elements. Typically, an admonition is rendered as an offset block in a document, sometimes outlined or shaded, with a title matching the admonition type.

Right-side Inline Callout

Right Inline Callout Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis.

Admonitions can be rendered as inline blocks (e.g., for sidebars), placing them to the right using the ‘inline end’ modifiers:

!!! info inline end "Right Inline Callout Block"
    Lorem ipsum dolor sit amet, consectetur....

Important: Admonitions that use the inline modifiers must be declared prior to the content block you want to place them beside. If there’s insufficient space to render the admonition next to the block, the admonition will stretch to the full width of the viewport, e.g., on mobile viewports.

Sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa.

Left-side Inline Callout

Left Inline Callout Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis.

Admonitions can be rendered as inline blocks (e.g., for sidebars), placing them to the left using the ‘inline’ modifier:

!!! info inline "Left Inline Callout Block"
    Lorem ipsum dolor sit amet, consectetur....

Important: Admonitions that use the inline modifiers must be declared prior to the content block you want to place them beside. If there’s insufficient space to render the admonition next to the block, the admonition will stretch to the full width of the viewport, e.g., on mobile viewports.

Sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa.

Admonition Types

Note

note

Abstract

abstract, summary, tldr

Info

info, todo

Tip

tip, hint, important

Success

success, check, done

Question

question, help, faq

Warning

warning, caution, attention

Failure

failure, fail, missing

Danger

danger, error

Bug

bug

Example

example, snippet

Quote

quote, cite

Advanced Examples

Tabs

Using Tabs in an Admonition
  • Sed sagittis eleifend rutrum
  • Donec vitae suscipit est
  • Nulla tempor lobortis orci
  1. Sed sagittis eleifend rutrum
  2. Donec vitae suscipit est
  3. Nulla tempor lobortis orci
markdown
???+ example "Using Tabs in an Admonition"
    === "Unordered list"
        * Sed sagittis eleifend rutrum
        * Donec vitae suscipit est
        * Nulla tempor lobortis orci

    === "Ordered list"
        1. Sed sagittis eleifend rutrum
        2. Donec vitae suscipit est
        3. Nulla tempor lobortis orci

Nested

foldable and nested

Apache complex nested structure

  apache:
    startservers: 2
    maxclients: 2

Apache simple flat structure

  apache_startservers: 2
  apache_maxclients: 250
markdown
??? example "foldable and nested"
    !!! info "Apache complex nested structure"
        ```yaml
          apache:
            startservers: 2
            maxclients: 2
        ```

    !!! info "Apache simple flat structure"
        ```yaml
          apache_startservers: 2
          apache_maxclients: 250
        ```

GitHub-style callouts

This is a regular blockquote, prefixed with > but without a type specification.

A GitHub callout is started with a blockquote marker, >, followed by [!<type>]. The content of the callout follows on subsequent lines, each prefixed with >, like this for a note:

Note:

Content <type> is case-insensitive.
Lines are contiguous unless the preceding line ends with two space characters.

markdown
> [!NOTE] **Note:**
> Content `<type>` is case-insensitive.  
> Lines are contiguous unless the preceding line ends with two space characters.

TOML parsing error

VS Code toml extensions don’t recognize this format and will indicate an Unresolved link reference problem. This happens for [!note] (or [!NOTE], [!WARNING], etc.) because tools like VS Code’s Markdown validator or markdownlint misinterpret the bracketed text inside a blockquote alert as a reference link, like
[!note](https://site.url), rather than as the specialized callout syntax.

Configuration

zensical.toml
[project.markdown_extensions.pymdownx.quotes]
callouts = true

Supported callout types

Five callout types are supported by GitHub. For three of them a direct mapping exists to the admonition type. The other two, IMPORTANT and CAUTION, use the default admonition icon and styling unless a custom style is added.

Note

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Tip

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Warning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequa

Important

Not a built-in admonition type, so the default admonition icon and styling is used unless a custom style is added.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

Caution

Not a built-in admonition type, so the default admonition icon and styling is used unless a custom style is added.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

With the Quotes extension, any admonition type supported by Zensical can be used, not only these five, for example:
> [!success] *Success* isn't a GitHub callout *type*.

Success isn’t a GitHub callout type.

PHP Code Test

Page path: /opt/zensical/zensical-project/site/guide/admonitions.html
PHP files directory: /opt/zensical/zensical-project/site/phpscripts
Found the 'common.php' file.