Custom container for block and inline (original) (raw)

March 24, 2016, 12:23am 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

This is a special emphasis with attributes

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
• Spoiler tag syntax discussion
• Block directives discussion
• Content block discussion
• CSS classes on blocks discussion
• Alert/warning boxes discussion