Awesome
mdast-util-directive
mdast extensions to parse and serialize generic directives proposal
(:cite[smith04]
, ::youtube[Video of a cat in a box]{v=01ab2cd3efg}
, and
such).
Contents
- What is this?
- When to use this
- Install
- Use
- API
- HTML
- Syntax
- Syntax tree
- Types
- Compatibility
- Related
- Contribute
- License
What is this?
This package contains two extensions that add support for directive syntax in
markdown to mdast.
These extensions plug into
mdast-util-from-markdown
(to support parsing
directives in markdown into a syntax tree) and
mdast-util-to-markdown
(to support serializing
directives in syntax trees to markdown).
When to use this
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.
You can use these extensions when you are working with
mdast-util-from-markdown
and mdast-util-to-markdown
already.
When working with mdast-util-from-markdown
, you must combine this package
with micromark-extension-directive
.
When you don’t need a syntax tree, you can use micromark
directly with micromark-extension-directive
.
All these packages are used remark-directive
, which
focusses on making it easier to transform content by abstracting these
internals away.
This package only handles the syntax tree. For example, it does not handle how markdown is turned to HTML. 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.
Install
This package is ESM only. In Node.js (version 16+), install with npm:
npm install mdast-util-directive
In Deno with esm.sh
:
import {directiveFromMarkdown, directiveToMarkdown} from 'https://esm.sh/mdast-util-directive@3'
In browsers with esm.sh
:
<script type="module">
import {directiveFromMarkdown, directiveToMarkdown} from 'https://esm.sh/mdast-util-directive@3?bundle'
</script>
Use
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"}.
API
This package exports the identifiers
directiveFromMarkdown
and
directiveToMarkdown
.
There is no default export.
directiveFromMarkdown()
Create an extension for mdast-util-from-markdown
to enable directives in markdown.
Returns
Extension for mdast-util-from-markdown
to enable directives
(FromMarkdownExtension
).
directiveToMarkdown()
Create an extension for mdast-util-to-markdown
to enable directives in markdown.
There are no options, but passing options.quote
to
mdast-util-to-markdown
is honored for attributes.
Returns
Extension for mdast-util-to-markdown
to enable directives
(ToMarkdownExtension
).
ContainerDirective
Directive in flow content (such as in the root document, or block quotes), which contains further flow content (TypeScript type).
Type
import type {BlockContent, DefinitionContent, Parent} from 'mdast'
interface ContainerDirective extends Parent {
type: 'containerDirective'
name: string
attributes?: Record<string, string | null | undefined> | null | undefined
children: Array<BlockContent | DefinitionContent>
}
Directives
The different directive nodes (TypeScript type).
Type
type Directives = ContainerDirective | LeafDirective | TextDirective
LeafDirective
Directive in flow content (such as in the root document, or block quotes), which contains nothing (TypeScript type).
Type
import type {PhrasingContent, Parent} from 'mdast'
interface LeafDirective extends Parent {
type: 'leafDirective'
name: string
attributes?: Record<string, string | null | undefined> | null | undefined
children: Array<PhrasingContent>
}
TextDirective
Directive in phrasing content (such as in paragraphs, headings) (TypeScript type).
Type
import type {PhrasingContent, Parent} from 'mdast'
interface TextDirective extends Parent {
type: 'textDirective'
name: string
attributes?: Record<string, string | null | undefined> | null | undefined
children: Array<PhrasingContent>
}
HTML
This utility does not handle how markdown is turned to HTML. 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.
Syntax
See Syntax in micromark-extension-directive
.
Syntax tree
The following interfaces are added to mdast by this utility.
Nodes
TextDirective
interface TextDirective <: Parent {
type: 'textDirective'
children: [PhrasingContent]
}
TextDirective includes Directive
TextDirective (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'}]
}
LeafDirective
interface LeafDirective <: Parent {
type: 'leafDirective'
children: [PhrasingContent]
}
LeafDirective includes Directive
LeafDirective (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'}]
}
ContainerDirective
interface ContainerDirective <: Parent {
type: 'containerDirective'
children: [FlowContent]
}
ContainerDirective includes Directive
ContainerDirective (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.'}]
}
]
}
Mixin
Directive
interface mixin Directive {
name: string
attributes: Attributes?
}
interface Attributes {}
typedef string AttributeName
typedef string AttributeValue
Directive 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
null
must be treated as if the attribute was not included. In JavaScript, bothnull
andundefined
must be similarly ignored.
Types
This package is fully typed with TypeScript.
It exports the additional types ContainerDirective
,
Directives
, LeafDirective
, and
TextDirective
.
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, function (node) {
// `node` can now be one of the nodes for directives.
})
Compatibility
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, mdast-util-directive@^3
,
compatible with Node.js 16.
This utility works with mdast-util-from-markdown
version 2+ and
mdast-util-to-markdown
version 2+.
Related
remarkjs/remark-directive
— remark plugin to support generic directivesmicromark/micromark-extension-directive
— micromark extension to parse directives
Contribute
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.