mdast extensions to parse and serialize generic directives proposal
(:cite[smith04], ::youtube[Video of a cat in a box]{v=01ab2cd3efg}, and
such).
- What is this?
- When to use this
- Install
- Use
- API
- Syntax tree
- Types
- Compatibility
- Related
- Contribute
- License
This package contains extensions that add support for generic directives to
mdast-util-from-markdown and
mdast-util-to-markdown.
This package handles the syntax tree. You can use this with some more code to match your specific needs, to allow for anything from callouts, citations, styled blocks, forms, embeds, spoilers, etc. Traverse the tree to change directives to whatever you please.
These tools are all rather low-level.
In most cases, you’d want to use remark-directive with
remark instead.
Directives are one of the four ways to extend markdown: an arbitrary extension syntax (see Extending markdown in micromark’s docs for the alternatives and more info). This mechanism works well when you control the content: who authors it, what tools handle it, and where it’s displayed. When authors can read a guide on how to embed a tweet but are not expected to know the ins and outs of HTML or JavaScript. Directives don’t work well if you don’t know who authors content, what tools handle it, and where it ends up. Example use cases are a docs website for a project or product, or blogging tools and static site generators.
When working with mdast-util-from-markdown, you must combine this package with
micromark-extension-directive.
This utility does not handle how directives are turned to HTML. You must traverse the tree to change directives to whatever you please.
This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:
npm install mdast-util-directiveIn Deno with esm.sh:
import {directiveFromMarkdown, directiveToMarkdown} from 'https://esm.sh/mdast-util-directive@2'In browsers with esm.sh:
<script type="module">
import {directiveFromMarkdown, directiveToMarkdown} from 'https://esm.sh/mdast-util-directive@2?bundle'
</script>Say our document example.md contains:
A lovely language know as :abbr[HTML]{title="HyperText Markup Language"}.…and our module example.js looks as follows:
import fs from 'node:fs/promises'
import {fromMarkdown} from 'mdast-util-from-markdown'
import {toMarkdown} from 'mdast-util-to-markdown'
import {directive} from 'micromark-extension-directive'
import {directiveFromMarkdown, directiveToMarkdown} from 'mdast-util-directive'
const doc = await fs.readFile('example.md')
const tree = fromMarkdown(doc, {
extensions: [directive()],
mdastExtensions: [directiveFromMarkdown]
})
console.log(tree)
const out = toMarkdown(tree, {extensions: [directiveToMarkdown]})
console.log(out)…now running node example.js yields (positional info removed for brevity):
{
type: 'root',
children: [
{
type: 'paragraph',
children: [
{type: 'text', value: 'A lovely language know as '},
{
type: 'textDirective',
name: 'abbr',
attributes: {title: 'HyperText Markup Language'},
children: [{type: 'text', value: 'HTML'}]
},
{type: 'text', value: '.'}
]
}
]
}A lovely language know as :abbr[HTML]{title="HyperText Markup Language"}.This package exports the identifiers directiveFromMarkdown and
directiveToMarkdown.
There is no default export.
Extension for mdast-util-from-markdown.
Extension for mdast-util-to-markdown.
There are no options, but passing options.quote to
mdast-util-to-markdown is honored for attributes.
The following interfaces are added to mdast by this utility.
interface TextDirective <: Parent {
type: 'textDirective'
children: [PhrasingContent]
}
TextDirective includes DirectiveTextDirective (Parent) is a directive. It can be used where phrasing content is expected. Its content model is also phrasing content. It includes the mixin Directive.
For example, the following Markdown:
:name[Label]{#x.y.z key=value}Yields:
{
type: 'textDirective',
name: 'name',
attributes: {id: 'x', class: 'y z', key: 'value'},
children: [{type: 'text', value: 'Label'}]
}interface LeafDirective <: Parent {
type: 'leafDirective'
children: [PhrasingContent]
}
LeafDirective includes DirectiveLeafDirective (Parent) is a directive. It can be used where flow content is expected. Its content model is phrasing content. It includes the mixin Directive.
For example, the following Markdown:
::youtube[Label]{v=123}Yields:
{
type: 'leafDirective',
name: 'youtube',
attributes: {v: '123'},
children: [{type: 'text', value: 'Label'}]
}interface ContainerDirective <: Parent {
type: 'containerDirective'
children: [FlowContent]
}
ContainerDirective includes DirectiveContainerDirective (Parent) is a directive. It can be used where flow content is expected. Its content model is also flow content. It includes the mixin Directive.
The phrasing in the label is, when available, added as a paragraph with a
directiveLabel: true field, as the head of its content.
For example, the following Markdown:
:::spoiler[Open at your own peril]
He dies.
:::Yields:
{
type: 'containerDirective',
name: 'spoiler',
attributes: {},
children: [
{
type: 'paragraph',
data: {directiveLabel: true},
children: [{type: 'text', value: 'Open at your own peril'}]
},
{
type: 'paragraph',
children: [{type: 'text', value: 'He dies.'}]
}
]
}interface mixin Directive {
name: string
attributes: Attributes?
}
interface Attributes {}
typedef string AttributeName
typedef string AttributeValueDirective represents something defined by an extension.
The name field must be present and represents an identifier of an extension.
The attributes field represents information associated with the node.
The value of the attributes field implements the Attributes interface.
In the Attributes interface, every field must be an AttributeName and
every value an AttributeValue.
The fields and values can be anything: there are no semantics (such as by HTML
or hast).
In JSON, the value
nullmust be treated as if the attribute was not included. In JavaScript, bothnullandundefinedmust be similarly ignored.
This package is fully typed with TypeScript.
It exports the additional types ContainerDirective, LeafDirective,
TextDirective, and Directive.
It also registers the node types with @types/mdast.
If you’re working with the syntax tree, make sure to import this utility
somewhere in your types, as that registers the new node types in the tree.
/**
* @typedef {import('mdast-util-directive')}
*/
import {visit} from 'unist-util-visit'
/** @type {import('mdast').Root} */
const tree = getMdastNodeSomeHow()
visit(tree, (node) => {
// `node` can now be one of the nodes for directives.
})Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.
This plugin works with mdast-util-from-markdown version 1+ and
mdast-util-to-markdown version 1+.
remarkjs/remark-directive— remark plugin to support generic directivesmicromark/micromark-extension-directive— micromark extension to parse directives
See contributing.md in syntax-tree/.github for
ways to get started.
See support.md for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.