remark-custom-blocks

remark-custom-blocks

This plugin parses custom Markdown syntax to create new custom blocks. It adds new nodes types to the mdast produced by remark:

• {yourType}CustomBlock

If you are using rehype, the stringified HTML result will be divs with configurable CSS classes.

It is up to you to have CSS rules producing the desired result for these classes.

Syntax

[[yourType]]
| Here goes the content. Content gets parsed,
| so you could use quotes or anything inside of them:
| > Hello **World**!

produces:

<div class="some-class some-other-class"><p>Here goes the content. Content gets parsed,
so you could use quotes or anything inside of them:
</p>
<blockquote><p>Hello <strong>World</strong>!</blockquote></div>

with the following configuration object:

{
  yourType: 'some-class some-other-class',
}

Installation

npm:

npm install remark-custom-blocks

Usage

Dependencies:

const unified = require('unified')
const remarkParse = require('remark-parse')
const stringify = require('rehype-stringify')
const remark2rehype = require('remark-rehype')

const remarkCustomBlocks = require('remark-custom-blocks')

Usage:

unified()
  .use(remarkParse)
  .use(remarkCustomBlocks, {
    someType: 'a-css-class another-class',
    anotherType: 'foo',
  })
  .use(remark2rehype)
  .use(stringify)

As you can see, configuration is an object Type: 'space separated classes'.

The sample configuration provided above would have the following effect:

1. Allows you to use the following Markdown syntax to create blocks:

   [[someType]]
   | content
   [[anotherType]]
   | content
   

2. This Remark plugin would create mdast nodes for these two blocks, these nodes would be of type:

   • someTypeCustomBlock
   • anotherTypeCustomBlock

3. If you're using rehype, you will end up with divs like these:

   • <div class="a-css-class another-class">…
   • <div class="foo">…

License

MIT © Zeste de Savoir