Add fenced container extension

[P-SiZK]

Would it be possible to add a fenced container extension?
This would be a useful syntax for custom extensions, as discussed in the Generic directives/plugins syntax proposal.
The simplest form mirrors fenced code blocks, using colons instead of backticks:

:::foo bar
Lorem ipsum
:::

The HTML output below is one possible rendering.

<div class="foo bar">
<p>Lorem ipsum</p>
</div>

This syntax is already used in tools like Docusaurus and VuePress.
If this seems like a reasonable addition, I'd be happy to open a pull request.

[kivikakk]

Totally reasonable! Please do open a PR 😸

[digitalmoksha]

@P-SiZK I think adding support for directives is a great idea. But I have a couple thoughts:

1. I think we should follow the more common syntax for them, such as in Docusarus or micromark

   ::: name [inline-content] {key=val}
   contents, which are sometimes further block elements
   :::
   

   For example in Docusarus, you can create a note admonition using

   :::warning
   
   Hello world
   
   :::
   

   And you can change the title text of the admonition by specifying the inline-content

   :::warning[This is a Warning]
   
   Hello world
   
   :::
   

   See also the original syntax proposal. Note that commonmark-hs supports a fenced_divs option (which just allows specifying a div with attributes), as does pandoc. In fact there is an issue for extending pandoc to use the above syntax.

2. Since there is no way to register how a directive should be output, it makes sense to let the default HTML renderer output a div. The inline-content value could be placed in the title attribute, or possibly a dedicated data- attribute. To get proper handling of a directive, a user could use their own HTML renderer to recognize and output the directives they support.

3. Unfortunately, comrak doesn't support parsing attributes, such as {.warning width=100px}, though it would be great to have native support for that. So maybe it's not practical to have attribute support right out to of the gate.

Edit: Unfortunately, it doesn't seem that VuePress containers follow this syntax, which I think is a shame. And Myst Markdown uses something different as well 🤦