This plugin parses custom Markdown syntax to create new custom blocks.
It adds new nodes types to the mdast produced by remark:
If you are using rehype, the stringified HTML result will be div
s 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:
-
Allows you to use the following Markdown syntax to create blocks:
[[someType]]
| content
[[anotherType]]
| content
-
This Remark plugin would create mdast nodes for these two blocks, these nodes would be of type:
someTypeCustomBlock
anotherTypeCustomBlock
-
If you're using rehype, you will end up with div
s like these:
<div class="a-css-class another-class">…
<div class="foo">…
License
MIT © Zeste de Savoir