Custom container for block and inline

Extensions
1

Hi,

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:

:::spoiler
This is a spoiler
:::

would be rendered to HTML as:

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

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:

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

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