Additional Markdown Features
Admonitions
Admonitions are highlighted callouts for important context such as notes, tips, warnings, and cautions.
Admonitions are enabled by default. To disable them, add the following to your
_config.yml:
admonitions: false
This theme uses GitHub Markdown-style admonitions (blockquotes with a special
first line, eg. [!NOTE],[!WARNING], etc).
Each of the following examples shows the Markdown source first, and the
rendered result below it.
Admonition Types
> [!NOTE]
> This is a note admonition.
> [!TIP]
> This is a tip admonition.
> [!IMPORTANT]
> This is an important admonition.
> [!INFO]
> This is an info/hint admonition.
> [!WARNING]
> This is a warning admonition.
> [!CAUTION]
> This is a caution admonition.
> [!DANGER]
> This is a danger admonition.
[!NOTE] This is a note admonition.
[!TIP] This is a tip admonition.
[!IMPORTANT] This is an important admonition.
[!INFO] This is an info/hint admonition.
[!WARNING] This is a warning admonition.
[!CAUTION] This is a caution admonition.
[!DANGER] This is a danger admonition.
Buttons
Links can be styled as buttons using Kramdown’s
attribute list syntax.
Apply the .btn class to any Markdown link:
[Button](#){: .btn }
Button Variants
Colour Variants:
[Default](#){: .btn }
[Neutral](#){: .btn .btn-neutral }
[Info](#){: .btn .btn-info }
[Success](#){: .btn .btn-success }
[Warning](#){: .btn .btn-warning }
[Danger](#){: .btn .btn-danger }
Default Neutral Info Success Warning Danger
For smaller buttons add .btn-small:
[Small button](#){: .btn .btn-small }
[Small info](#){: .btn .btn-info .btn-small }
.btn-link renders a button with the appearance of a plain link:
[Link button](#){: .btn .btn-link }
Labels
Labels are small inline badges for marking status, releases, or other metadata.
Apply the .label class to any inline element using Kramdown’s
attribute list syntax:
New
{: .label }
New
Label variants
Default
{: .label }
Blue
{: .label .label-blue }
Green
{: .label .label-green }
Fuchsia
{: .label .label-fuchsia }
Yellow
{: .label .label-yellow }
Red
{: .label .label-red }
Gray
{: .label .label-gray }
Default
Blue
Green
Fuchsia
Yellow
Red
Gray
Inline labels
Labels can be placed inline using *text*{: .label } (notice there is no space
between the * and {).
Wrapping in *...* gives Kramdown an <em> element to attach the attribute:
### My Feature *New*{: .label .label-green }