Community Plugin
View plugin on GitHubgatsby-remark-fenced-divs
Adds fencedDivs blocks in markdown syntax tree produced by remark, and
convert them to <div>s in html using
remark-fenced-divs.
This plugin aims to imitate the comportment of the pandoc extension
fenced_divs
You can create div blocks using three colons as separator. The opening
fence should include at least one attribute used as class for the div.
Install
npm install --save gatsby-remark-fenced-divs
How to use
Currently, the
remark-fenced-divs plugin don’t
use any option as it only imitate the
pandoc extension.
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
...
"gatsby-remark-fenced-divs"
...
],
},
},
];Use the following Markdown syntax to create div blocks in your file:
fenced divs pass single word attribute as a class for the div
::: my-class
Here is a paragraph.
And another.
:::::HTML OUTPUT:
<div class="my-class">
<p>Here is a paragraph.</p>
<p>And another.</p>
</div>fenced divs supports extended curly braces attributes
::::: {#special .sidebar num=3}
Here is a paragraph.
And another.
:::::HTML OUTPUT:
<div id="special" class="sidebar" data-num="3">
<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>This will generate the following html:
<div class="custom-block danger">
<div class="custom-block-body"><p>content</p></div>
</div>
<div class="custom-block info">
<div class="custom-block-heading">This is a title!</div>
<div class="custom-block-body"><p>content</p></div>
</div>