diff --git a/readme.md b/readme.md index 5f9cf42..480eacd 100644 --- a/readme.md +++ b/readme.md @@ -21,6 +21,9 @@ Use this plugin for remark 13+. ## Install +This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c): +Node 12+ is needed to use it and it must be `import`ed instead of `require`d. + [npm][]: ```sh @@ -44,46 +47,51 @@ A :i[lovely] language know as :abbr[HTML]{title="HyperText Markup Language"}. ::: ``` -And our script, `example.js`, looks as follows: +And our module, `example.js`, looks as follows: ```js -var vfile = require('to-vfile') -var report = require('vfile-reporter') -var unified = require('unified') -var parse = require('remark-parse') -var directive = require('remark-directive') -var remark2rehype = require('remark-rehype') -var format = require('rehype-format') -var stringify = require('rehype-stringify') -var visit = require('unist-util-visit') -var h = require('hastscript') +import {readSync} from 'to-vfile' +import {reporter} from 'vfile-reporter' +import {unified} from 'unified' +import remarkParse from 'remark-parse' +import remarkDirective from 'remark-directive' +import remarkRehype from 'remark-rehype' +import rehypeFormat from 'rehype-format' +import rehypeStringify from 'rehype-stringify' +import {visit} from 'unist-util-visit' +import {h} from 'hastscript' + +const file = readSync('example.md') unified() - .use(parse) - .use(directive) - .use(htmlDirectives) - .use(remark2rehype) - .use(format) - .use(stringify) - .process(vfile.readSync('example.md'), function (err, file) { - console.error(report(err || file)) + .use(remarkParse) + .use(remarkDirective) + .use(customPlugin) + .use(remarkRehype) + .use(rehypeFormat) + .use(rehypeStringify) + .process(file) + .then((file) => { + console.error(reporter(file)) console.log(String(file)) }) // This plugin is just an example! You can handle directives however you please! -function htmlDirectives() { - return transform +function customPlugin() { + return (tree) => { + visit(tree, (node) => { + if ( + node.type === 'textDirective' || + node.type === 'leafDirective' || + node.type === 'containerDirective' + ) { + const data = node.data || (node.data = {}) + const hast = h(node.name, node.attributes) - function transform(tree) { - visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], ondirective) - } - - function ondirective(node) { - var data = node.data || (node.data = {}) - var hast = h(node.name, node.attributes) - - data.hName = hast.tagName - data.hProperties = hast.properties + data.hName = hast.tagName + data.hProperties = hast.properties + } + }) } } ``` @@ -105,7 +113,10 @@ example.md: no issues found ## API -### `remark().use(directive)` +This package exports no identifiers. +The default export is `remarkDirective`. + +### `unified().use(remarkDirective)` Configures remark so that it can parse and serialize directives. Doesn’t handle the directives: [create your own plugin][create-plugin] to do