gatsby-remark-fenced-divs

gatsby-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>