There are certain statements you may want to draw attention to by taking them out of the content’s flow and labeling them with a priority. These are called admonitions. It’s rendered style is determined by the assigned label (i.e., value). Asciidoctor provides five admonition style labels:
When you want to call attention to a single paragraph, start the first line of the paragraph with the label you want to use.
The label must be uppercase and followed by a colon (
WARNING: Wolpertingers are known to nest in server racks. (1) (2) Enter at your own risk.
The label must be uppercase and immediately followed by a colon (
Separate the first line of the paragraph from the label by a single space.
The result of Example 1 is displayed below.
|Wolpertingers are known to nest in server racks. Enter at your own risk. :icons: font|
When you want to apply an admonition to complex content, set the label as a style attribute on a block. As seen in the next example, admonition labels are commonly set on example blocks. This behavior is referred to as masquerading. The label must be uppercase when set as an attribute on a block.
[IMPORTANT] (1) .Feeding the Werewolves ==== (2) While werewolves are hardy community members, keep in mind the following dietary concerns: . They are allergic to cinnamon. . More than two glasses of orange juice in 24 hours makes them howl in harmony with alarms and sirens. . Celery makes them sad. ====
Set the label in an attribute list on a delimited block. The label must be uppercase.
Admonition styles are commonly set on example blocks. Example blocks are delimited by four equal signs (
The result of Example 2 is displayed below.
Feeding the Werewolves
While werewolves are hardy community members, keep in mind the following dietary concerns:
In the examples above, the admonition is rendered in a callout box with the style label in the gutter.
You can replace the textual labels with icons by setting the
icons attribute on the document.
This is how the WARNING admonition paragraph renders when icons is set and assigned the
:icons: font WARNING: Wolpertingers are known to nest in server racks. Enter at your own risk.
The result of Example 3 is displayed below.
|Wolpertingers are known to nest in server racks. Enter at your own risk.|
Learn more about using Font Awesome or custom icons with admonitions in Font Icons Mode.
If image-based or font-based icons are not available, you can leverage the admonition caption to display an emoji (or any symbol from Unicode) in the place of the admonition label, thus giving you an alternative way to make admonition icons.
icons attribute is not set on the document, the admonition label is shown as text (e.g., CAUTION).
The text for this label comes from an AsciiDoc attribute.
The name of the attribute is
<type> is the admonition type in lowercase.
For example, the attribute for a tip admonition is
Instead of a word, you can assign a Unicode glyph to this attribute:
:tip-caption: 💡 [TIP] It's possible to use Unicode glyphs as admonition icons.
Here’s the result you get in the HTML:
<td class="icon"> <div class="title">💡</div> </td>
Instead of entering the glyph directly, you can enter a character reference instead. However, since you’re defining the character reference in an attribute entry, you (currently) have to disable substitutions on the value.
:tip-caption: pass:[💡] [TIP] It's possible to use Unicode glyphs as admonition icons.
On GitHub, the HTML output from the AsciiDoc processor is run through a postprocessing filter that substitutes emoji shortcodes with emoji symbols. That means you can use these shortcodes instead in the value of the attribute:
ifdef::env-github :tip-caption: :bulb: endif:: [TIP] It's possible to use emojis as admonition icons on GitHub.
When the document is processed through the GitHub interface, the shortcodes get replaced with real emojis. This is the only known way to get admonition icons to work on GitHub.