If you don't need Pandoc compatibility and remarl 13+ you should consider using remark-directive.
Important!
This plugin is made for the new parser in remark (micromark, see remarkjs/remark#536). Use this plugin for remark 13+.
If you don't need Pandoc compatibility you should consider using remark-directive.
Getting started
Fenced divs are some kind of generic syntax for block contents with a syntax similar to fenced code blocks but using a 3 colons ::: as delimiter instead of ```.
It allows a simple word used as a class in html:
::: my-class
This is a paragraph.
:::
Will be rendered in html as:
<div class="my-div">
<p>This is a paragraph.</p>
</div>
Or extended attributes syntax in curly braces:
::: {#navbar .container .right key=1 key2="value 2"}
This is a paragraph.
:::
Will be rendered in html as:
<div id="navbar" class="container right" data-key1="1" data-key2="value 2">
<p>This is a paragraph.</p>
</div>
Syntax details
From pandoc reference: https://pandoc.org/MANUAL.html#extension-fenced_divs
This implemenatation is incomplete PR are welcome.
- [x] A Div must start at the beginning of a line: it mustn't be indented.
- [x] A Div starts with a fence containing at least three consecutive colons plus some attributes.
- [x] The attributes may optionally be followed by another string of consecutive colons.
- [x] The attribute syntax is exactly as in fenced code blocks (see Extension: fenced_code_attributes). As with fenced code blocks, one can use either attributes in curly braces or
- [x] a single unbraced word, which will be treated as a class name.
- [x] The Div must ends with another line containing a string of at least three consecutive colons at the beginning of the line.
- ~~The fenced Div should be separated by blank lines:~~
- [ ]
from preceding - [ ]
and following blocks.
- [ ] The fenced Div can be nested.
Other implementations details include:
- A Div ends with a fence containing at least three consecutive colons plus some spaces.
- If no closing fence is found, the container runs to the end of its parent container (block quote, list item, document, or other container).
- A fenced div can be indented with up to 3 spaces.
- It is not necessary to add a blank line before and after the fenced div.
Acknowledgments
Code adapted from: