# Custom container for block and inline

**URL:** <https://talk.commonmark.org/t/custom-container-for-block-and-inline/2051>\
**Category:** Extensions\
**Created:** [March 24, 2016, 12:23am UTC](https://talk.commonmark.org/t/custom-container-for-block-and-inline/2051 "2016-03-24T00:23:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![xoofx](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/xoofx/32/1424_2.png) [@xoofx](https://talk.commonmark.org/u/xoofx)\
**Post date:** [March 24, 2016, 12:23am UTC](https://talk.commonmark.org/t/custom-container-for-block-and-inline/2051/1 "2016-03-24T00:23:32Z")

</div>

Hi,

This is a follow up on [custom container](http://talk.commonmark.org/t/generic-directives-plugins-syntax/444), 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](http://talk.commonmark.org/t/generic-directives-plugins-syntax/444)” using a similar syntax to fenced code block with `:::` opening/closing characters. I saw that [markdown-it](https://markdown-it.github.io/) 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:

```auto
:::spoiler
This is a spoiler
::: 

```

would be rendered to HTML as:

```auto
<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:

```auto
This is a ::special emphasis::

```

is rendered to HTML as a plain `<span>`:

`````auto
<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>
```
`````

---

<div class="post-metadata">

**Author:** ![chrisalley](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/chrisalley/32/906_2.png) [@chrisalley](https://talk.commonmark.org/u/chrisalley)\
**Post date:** [March 24, 2016, 12:38pm UTC](https://talk.commonmark.org/t/custom-container-for-block-and-inline/2051/2 "2016-03-24T12:38:04Z")

</div>

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:

- [Generic directives/plugins syntax discussion](http://talk.commonmark.org/t/generic-directives-plugins-syntax/444)
- [Spoiler tag syntax discussion](http://talk.commonmark.org/t/what-could-a-spoiler-tag-extension-look-like/767)
- [Block directives discussion](http://talk.commonmark.org/t/block-directives/802)
- [Content block discussion](http://talk.commonmark.org/t/content-block-inline-syntax/815)
- [CSS classes on blocks discussion](http://talk.commonmark.org/t/css-classes-on-any-block/711)
- [Alert/warning boxes discussion](http://talk.commonmark.org/t/support-for-alert-warning-boxes/1289)

---

<div class="post-metadata">

**Author:** ![chrisalley](https://cdn.commonmark.org/user_avatar/talk.commonmark.org/chrisalley/32/906_2.png) [@chrisalley](https://talk.commonmark.org/u/chrisalley)\
**Post date:** [March 24, 2016, 12:40pm UTC](https://talk.commonmark.org/t/custom-container-for-block-and-inline/2051/3 "2016-03-24T12:40:04Z")

</div>