Custom container for block and inline


This is a follow up on custom container, as I have been implementing custom container, I would like to share what I ended up with:

For a custom container block, I have used what was described in “Container Block Directives” using a similar syntax to fenced code block with ::: opening/closing characters. I saw that markdown-it implemented this feature, so that looked like an easy candidate to implement. Generic attributes {...} can be attached to the block as well.

For example, the custom container block:

This is a spoiler

would be rendered to HTML as:

<div class="spoiler">
<p>This is a spoiler</p>

For the inline directive, and for consistency with container block, I have used a syntax similar to emphasis, requiring a text to be embraced by :: so that:

This is a ::special emphasis::

is rendered to HTML as a plain <span>:

<p>This is a special <span>emphasis</span></p>
As attributes can be attached as well to it, it is easy to add them:

This is a ::special emphasis with attributes::{.warning}

is rendered as:

<p>This is a special <span class="warning">emphasis with attributes</span></p>

Thanks for sharing, @xoofx. Since we already numerous topics on custom containers/directives, I’m going to close this topic to prevent further duplication. For reference, here are some related topics where this extension can be discussed:

1 Like