Back to the docs

aDOMonitions before / after demo

Each row shows three columns: the original Markdown source, the Generated HTML that a static site generator would produce without admonition support,
and the Live output after aDOMonitions transforms that HTML into a styled callout.

Click Transform to run init() on the live-output rightmost panels and see the result.

GitHub-style blockquotes

Note (compact — body after <br>)
Markdown
> [!NOTE]
> This is a compact note with the body on the same paragraph.
Generated HTML
<blockquote>
  <p>[!NOTE]<br>This is a compact note with the
  body on the same paragraph.</p>
</blockquote>
Live output — raw

[!NOTE]
This is a compact note with the body on the same paragraph.

Info (compact — body after <br>)
Markdown
> [!INFO]
> Body on same paragraph with a **bold** word.
Generated HTML
<blockquote>
  <p>[!INFO]<br>Body on same paragraph with a
  <strong>bold</strong> word.</p>
</blockquote>
Live output — raw

[!INFO]
Body on same paragraph with a bold word.

Tip (multi-paragraph body)
Markdown
> [!TIP]
>
> This is a separate paragraph from the title.
>
> And includes a second paragraph as well.
Generated HTML
<blockquote>
  <p>[!TIP]</p>
  <p>This is a separate paragraph
  from the title.</p>
  <p>And includes a second
  paragraph as well.</p>
</blockquote>
Live output — raw

[!TIP]

This is a separate paragraph from the title.

And includes a second paragraph as well.

Important (custom title)
Markdown
> [!IMPORTANT] Breaking Change
> The API has changed in v2.0.
Generated HTML
<blockquote>
  <p>[!IMPORTANT] Breaking Change<br>
  The API has changed in v2.0.</p>
</blockquote>
Live output — raw

[!IMPORTANT] Breaking Change
The API has changed in v2.0.

Warning (multi-block body)
Markdown
> [!WARNING]
>
> Do not run this in production.
>
> - It will delete data
> - It cannot be undone
Generated HTML
<blockquote>
  <p>[!WARNING]</p>
  <p>Do not run this in production.</p>
  <ul>
    <li>It will delete data</li>
    <li>It cannot be undone</li>
  </ul>
</blockquote>
Live output — raw

[!WARNING]

Do not run this in production.

  • It will delete data
  • It cannot be undone
Caution (inline body)
Markdown
> [!CAUTION] This action is *irreversible*.
Generated HTML
<blockquote>
  <p>[!CAUTION] This action is
  <em>irreversible</em>.</p>
</blockquote>
Live output — raw

[!CAUTION] This action is irreversible.

Danger
Markdown
> [!DANGER]
> This will destroy your database.
Generated HTML
<blockquote>
  <p>[!DANGER]</p>
  <p>This will destroy your database.</p>
</blockquote>
Live output — raw

[!DANGER]

This will destroy your database.

Docusaurus-style fences

Note (basic)
Markdown
:::note
This is a Docusaurus-style note admonition.
:::
Generated HTML
<p>:::note</p>
<p>This is a Docusaurus-style note
admonition.</p>
<p>:::</p>
Live output — raw

:::note

This is a Docusaurus-style note admonition.

:::

Info (custom title)
Markdown
:::info Did you know?
Admonitions support `inline code` and [links](#).
:::
Generated HTML
<p>:::info Did you know?</p>
<p>Admonitions support
<code>inline code</code> and
<a href="#">links</a>.</p>
<p>:::</p>
Live output — raw

:::info Did you know?

Admonitions support inline code and links.

:::

Tip
Markdown
:::tip
Use `theme: null` to bring your own CSS.
:::
Generated HTML
<p>:::tip</p>
<p>Use <code>theme: null</code>
to bring your own CSS.</p>
<p>:::</p>
Live output — raw

:::tip

Use theme: null to bring your own CSS.

:::

Important
Markdown
:::important
This is a critical piece of information.
:::
Generated HTML
<p>:::important</p>
<p>This is a critical piece of information.</p>
<p>:::</p>
Live output — raw

:::important

This is a critical piece of information.

:::

Warning (multi-element body)
Markdown
:::warning
Be careful with the following:

- Unvalidated inputs
- Missing error handling
:::
Generated HTML
<p>:::warning</p>
<p>Be careful with the following:</p>
<ul>
  <li>Unvalidated inputs</li>
  <li>Missing error handling</li>
</ul>
<p>:::</p>
Live output — raw

:::warning

Be careful with the following:

  • Unvalidated inputs
  • Missing error handling

:::

Caution
Markdown
:::caution
Proceed carefully — this cannot be undone.
:::
Generated HTML
<p>:::caution</p>
<p>Proceed carefully — this cannot be undone.</p>
<p>:::</p>
Live output — raw

:::caution

Proceed carefully — this cannot be undone.

:::

Danger
Markdown
:::danger
This will destroy your database. Proceed with extreme caution.
:::
Generated HTML
<p>:::danger</p>
<p>This will destroy your database.
Proceed with extreme caution.</p>
<p>:::</p>
Live output — raw

:::danger

This will destroy your database. Proceed with extreme caution.

:::