Admonitions#

Admonitions are a great way to include side content, without significantly interrupting the document flow. Sphinx provides several different types of admonitions and allows for the inclusion and nesting of arbitrary content.

Basic Usage#

.. note:: This is what the most basic admonitions look like.


.. note::
   It is *possible* to have multiple paragraphs in the same admonition.

   If you really want, you can even have lists, or code, or tables.


This is from reStructuredText.

Note

This is what the most basic admonitions look like.

Note

It is possible to have multiple paragraphs in the same admonition.

If you really want, you can even have lists, or code, or tables.

This is from reStructuredText.

```{note} This is what the most basic admonitions look like.
```

```{note}
It is *possible* to have multiple paragraphs in the same admonition.

If you really want, you can even have lists, or code, or tables.
```

This is from Markdown.

Note

This is what the most basic admonitions look like.

Note

It is possible to have multiple paragraphs in the same admonition.

If you really want, you can even have lists, or code, or tables.

This is from Markdown.

Custom Titles#

.. admonition:: Look ma! A custom title.

   It looks different though.


.. admonition:: Another Custom Title
   :class: note

   Maaa! I made it look the same by setting the class.

Look ma! A custom title.

It looks different though.

Another Custom Title

Maaa! I made it look the same by setting the class.

```{admonition} Look ma! A custom title.
It looks different though.
```

```{admonition} Another Custom Title
:class: note

Maaa! I made it look the same by setting the class.
```

Look ma! A custom title.

It looks different though.

Another Custom Title

Maaa! I made it look the same by setting the class.

Supported types#

admonition#

The one with the custom titles.

It’s got a certain charm to it.

attention#

Attention

Climate change is real.

caution#

Caution

Cliff ahead: Don’t drive off it.

danger#

Danger

Mad scientist at work!

error#

Error

Does not compute.

hint#

Hint

Insulators insulate, until they are subject to ______ voltage.

important#

Important

Tech is not neutral, nor is it apolitical.

note#

Note

This is a note.

seealso#

See also

Other relevant information.

tip#

Tip

25% if the service is good.

todo#

: This needs the sphinx.ext.todo extension.

Todo

Figure out why this extension uses admonition-todo as the class, instead of using todo (like every other admonition style in Sphinx).

warning#

Warning

Reader discretion is strongly advised.

Nesting admonitions#

.. note::

   You can nest admonitions.

   .. warning::

      But you really should not.

      .. danger::

         It's distracting.

      And can be confusing for the user to understand.

   And, honestly, looks weird.

Note

You can nest admonitions.

Warning

But you really should not.

Danger

It’s distracting.

And can be confusing for the user to understand.

And, honestly, looks weird.

`````{note}
You can nest admonitions.

````{warning}
But you really should not.

```{danger}
It's distracting.
```

And can be confusing for the user to understand.
````

And, honestly, looks weird.
`````

Note

You can nest admonitions.

Warning

But you really should not.

Danger

It’s distracting.

And can be confusing for the user to understand.

And, honestly, looks weird.

Custom Admonitions#

It is possible to define custom admonitions for use with Furo. This is done by including custom CSS in the site.

Borrowing from the equivalent example for mkdocs-material, the CSS would be something like:

:root {
  --icon--pied-piper: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M244 246c-3.2-2-6.3-2.9-10.1-2.9-6.6 0-12.6 3.2-19.3 3.7l1.7 4.9zm135.9 197.9c-19 0-64.1 9.5-79.9 19.8l6.9 45.1c35.7 6.1 70.1 3.6 106-9.8-4.8-10-23.5-55.1-33-55.1zM340.8 177c6.6 2.8 11.5 9.2 22.7 22.1 2-1.4 7.5-5.2 7.5-8.6 0-4.9-11.8-13.2-13.2-23 11.2-5.7 25.2-6 37.6-8.9 68.1-16.4 116.3-52.9 146.8-116.7C548.3 29.3 554 16.1 554.6 2l-2 2.6c-28.4 50-33 63.2-81.3 100-31.9 24.4-69.2 40.2-106.6 54.6l-6.3-.3v-21.8c-19.6 1.6-19.7-14.6-31.6-23-18.7 20.6-31.6 40.8-58.9 51.1-12.7 4.8-19.6 10-25.9 21.8 34.9-16.4 91.2-13.5 98.8-10zM555.5 0l-.6 1.1-.3.9.6-.6zm-59.2 382.1c-33.9-56.9-75.3-118.4-150-115.5l-.3-6c-1.1-13.5 32.8 3.2 35.1-31l-14.4 7.2c-19.8-45.7-8.6-54.3-65.5-54.3-14.7 0-26.7 1.7-41.4 4.6 2.9 18.6 2.2 36.7-10.9 50.3l19.5 5.5c-1.7 3.2-2.9 6.3-2.9 9.8 0 21 42.8 2.9 42.8 33.6 0 18.4-36.8 60.1-54.9 60.1-8 0-53.7-50-53.4-60.1l.3-4.6 52.3-11.5c13-2.6 12.3-22.7-2.9-22.7-3.7 0-43.1 9.2-49.4 10.6-2-5.2-7.5-14.1-13.8-14.1-3.2 0-6.3 3.2-9.5 4-9.2 2.6-31 2.9-21.5 20.1L15.9 298.5c-5.5 1.1-8.9 6.3-8.9 11.8 0 6 5.5 10.9 11.5 10.9 8 0 131.3-28.4 147.4-32.2 2.6 3.2 4.6 6.3 7.8 8.6 20.1 14.4 59.8 85.9 76.4 85.9 24.1 0 58-22.4 71.3-41.9 3.2-4.3 6.9-7.5 12.4-6.9.6 13.8-31.6 34.2-33 43.7-1.4 10.2-1 35.2-.3 41.1 26.7 8.1 52-3.6 77.9-2.9 4.3-21 10.6-41.9 9.8-63.5l-.3-9.5c-1.4-34.2-10.9-38.5-34.8-58.6-1.1-1.1-2.6-2.6-3.7-4 2.2-1.4 1.1-1 4.6-1.7 88.5 0 56.3 183.6 111.5 229.9 33.1-15 72.5-27.9 103.5-47.2-29-25.6-52.6-45.7-72.7-79.9zm-196.2 46.1v27.2l11.8-3.4-2.9-23.8zm-68.7-150.4l24.1 61.2 21-13.8-31.3-50.9zm84.4 154.9l2 12.4c9-1.5 58.4-6.6 58.4-14.1 0-1.4-.6-3.2-.9-4.6-26.8 0-36.9 3.8-59.5 6.3z"/></svg>');
}
.admonition.pied-piper {
  border-color: rgb(43, 155, 70);
}
.admonition.pied-piper > .admonition-title {
  background-color: rgba(43, 155, 70, 0.1);
  border-color: rgb(43, 155, 70);
}
.admonition.pied-piper > .admonition-title::before {
  background-color: rgb(43, 155, 70);
  -webkit-mask-image: var(--icon--pied-piper);
  mask-image: var(--icon--pied-piper);
}

With this, you can now use this by setting the :class: pied-piper on an admonition:

.. admonition:: Pied Piper
   :class: pied-piper

   This is neat, right?


This is from reStructuredText.

Pied Piper

This is neat, right?

This is from reStructuredText.

```{admonition} Pied Piper
:class: pied-piper

This is neat, right?
```

This is from Markdown.

Pied Piper

This is neat, right?

This is from Markdown.