Custom containers

Enable with .UseCustomContainers() (included in UseAdvancedExtensions()).

Custom containers generate <div> elements from fenced ::: blocks, similar to how fenced code blocks work. They are inspired by this CommonMark discussion.

Block containers

Use ::: to open and close a container block:

::: warning
This is a warning container. You can put **any Markdown** content here.

- Including lists
- And other blocks
:::

This is a warning container. You can put any Markdown content here.

Including lists
And other blocks

HTML output

<div class="warning">
  <p>This is a warning container...</p>
</div>

The text after ::: becomes the CSS class of the <div>.

Inline containers

Use a single : pair for inline containers:

This has a :custom-span[styled word]{.highlight} in it.

Nesting

Containers can be nested using more colons:

:::: outer
::: inner
Nested content.
:::
::::

Attributes

Combine with Generic attributes for full control:

::: {.alert .alert-info #my-alert role="alert"}
This is an informational alert.
:::

This produces:

<div class="alert alert-info" id="my-alert" role="alert">
  <p>This is an informational alert.</p>
</div>