Supporting pandoc fenced divs

[benabel]

Subject of the feature

Fenced divs are some kind of generic syntax for block contents with a syntax similar to fenced code blocks but using : as delimiter instead of ```

Reference: https://pandoc.org/MANUAL.html#extension-fenced_divs

fenced divs supports attributes

::::: {#special .sidebar}
Here is a paragraph.

And another.
:::::

pandoc converts it to html <div>'s:

<div id="special" class="sidebar">
<p>Here is a paragraph.</p>
<p>And another.</p>
</div>

Fenced divs can be nested:

::: Warning ::::::
This is a warning.

::: Danger
This is a warning within a warning.
:::
::::::::::::::::::

HTML OUTPUT:

<div class="Warning">
<p>This is a warning.</p>
<div class="Danger">
<p>This is a warning within a warning.</p>
</div>
</div>

Problem

I think I could adapt the code from the fenced code blocks of remark however as it is directly inside remark could you give me a plug-in that I could fork to implement it.

Alternatives

Currently I use remark-custom-blocks but I think fenced divs is more generic and doesn't need | at the beginning of the line that is quite heavy.

Very similar with:

• remark-container
• remark-containers

But I need it to be consistent with pandoc.

[wooorm]

Is this what you’re looking for? https://github.com/medfreeman/remark-generic-extensions

[benabel]

Hi @woorm, thanks for your interest. No this is not the same.

Actually gerenric-exetnsions is a proposal but fenced_divs are already implemented in pandoc and it works quite nicely both for md-> html or even html-> md and others(latex if you use custom filters).

[benabel]

I was looking to hack into remark-math maybe trying to modify the math block parser, but also need to implement attributes and nesting. Maybe another start point would be better?

[benabel]

I started a repository based on the code of remark-math: https://github.com/benabel/remark-fenced-divs

It is a WIP. I'll post questions in spectrum to finish the implementation.

[wooorm]

Awesome!

[benabel]

I published version 1.0.0 on npm https://www.npmjs.com/package/remark-fenced-divs, parsing is alright however I'd like to emit warnings if divs are not correctly closed how can I emit warnings in a plugin?

[ChristianMurphy]

plugins are passed a vFile, that vfile can store warning and error information https://github.com/vfile/vfile#vfilemessagereason-position-origin

[benabel]

Thank you very much for your quick answer, can you point me to a plugin that use this. I already saw messages from math-plugin but I don't know if they are generated by katex or by the plugin.

[ChristianMurphy]

remark-lint has many examples https://github.com/remarkjs/remark-lint/search?q=message&unscoped_q=message

[benabel]

Thank you very much, I'll investigate on this.