Update docs

This commit is contained in:
Titus Wormer 2021-08-05 15:51:24 +02:00
parent e30accdd27
commit 35e8ccfd16
No known key found for this signature in database
GPG key ID: E6E581152ED04E2E

View file

@ -21,6 +21,9 @@ Use this plugin for remark 13+.
## Install ## 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][]: [npm][]:
```sh ```sh
@ -44,47 +47,52 @@ 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 ```js
var vfile = require('to-vfile') import {readSync} from 'to-vfile'
var report = require('vfile-reporter') import {reporter} from 'vfile-reporter'
var unified = require('unified') import {unified} from 'unified'
var parse = require('remark-parse') import remarkParse from 'remark-parse'
var directive = require('remark-directive') import remarkDirective from 'remark-directive'
var remark2rehype = require('remark-rehype') import remarkRehype from 'remark-rehype'
var format = require('rehype-format') import rehypeFormat from 'rehype-format'
var stringify = require('rehype-stringify') import rehypeStringify from 'rehype-stringify'
var visit = require('unist-util-visit') import {visit} from 'unist-util-visit'
var h = require('hastscript') import {h} from 'hastscript'
const file = readSync('example.md')
unified() unified()
.use(parse) .use(remarkParse)
.use(directive) .use(remarkDirective)
.use(htmlDirectives) .use(customPlugin)
.use(remark2rehype) .use(remarkRehype)
.use(format) .use(rehypeFormat)
.use(stringify) .use(rehypeStringify)
.process(vfile.readSync('example.md'), function (err, file) { .process(file)
console.error(report(err || file)) .then((file) => {
console.error(reporter(file))
console.log(String(file)) console.log(String(file))
}) })
// This plugin is just an example! You can handle directives however you please! // This plugin is just an example! You can handle directives however you please!
function htmlDirectives() { function customPlugin() {
return transform return (tree) => {
visit(tree, (node) => {
function transform(tree) { if (
visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], ondirective) node.type === 'textDirective' ||
} node.type === 'leafDirective' ||
node.type === 'containerDirective'
function ondirective(node) { ) {
var data = node.data || (node.data = {}) const data = node.data || (node.data = {})
var hast = h(node.name, node.attributes) const hast = h(node.name, node.attributes)
data.hName = hast.tagName data.hName = hast.tagName
data.hProperties = hast.properties data.hProperties = hast.properties
} }
})
}
} }
``` ```
@ -105,7 +113,10 @@ example.md: no issues found
## API ## 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. Configures remark so that it can parse and serialize directives.
Doesnt handle the directives: [create your own plugin][create-plugin] to do Doesnt handle the directives: [create your own plugin][create-plugin] to do