unified

Project: benabel/remark-fenced-divs

Package: remark-fenced-divs@2.0.1

  1. Dependencies: 0·Dependents: 0
  2. remark plugin to enable pandoc fenced_divs
  1. remark 195
  2. unified 167
  3. markdown 135
  4. plugin 130
  5. html 111
  6. mdast 88
  7. remark-plugin 74
  8. stringify 18
  9. compile 13

remark-fenced-divs

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.

Other implementations details include:

Acknowledgments

Code adapted from: