remark-frontmatter
remark plugin to support frontmatter (YAML, TOML, and more).
Contents
- What is this?
- When should I use this?
- Install
- Use
- API
- Examples
- Syntax
- Syntax tree
- Types
- Compatibility
- Security
- Related
- Contribute
- License
What is this?
This package is a unified (remark) plugin to add support for YAML, TOML, and other frontmatter. You can use this to add support for parsing and serializing this syntax extension.
unified is a project that transforms content with abstract syntax trees (ASTs). remark adds support for markdown to unified. mdast is the markdown AST that remark uses. micromark is the markdown parser we use. This is a remark plugin that adds support for the frontmatter syntax and AST to remark.
When should I use this?
Frontmatter is a metadata format in front of content. It’s typically written in YAML and is often used with markdown. This mechanism works well when you want authors, that have some markup experience, to configure where or how the content is displayed or supply metadata about content. Frontmatter does not work everywhere so it makes markdown less portable. A good example use case is markdown being rendered by (static) site generators.
Install
This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:
npm install remark-frontmatter
In Deno with esm.sh
:
import remarkFrontmatter from 'https://esm.sh/remark-frontmatter@4'
In browsers with esm.sh
:
<script type="module">
import remarkFrontmatter from 'https://esm.sh/remark-frontmatter@4?bundle'
</script>
Use
Say we have the following file, example.md
:
+++
title = "New Website"
+++
# Other markdown
And our module, example.js
, looks as follows:
import {read} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
import remarkStringify from 'remark-stringify'
const file = await unified()
.use(remarkParse)
.use(remarkStringify)
.use(remarkFrontmatter, ['yaml', 'toml'])
.use(() => (tree) => {
console.dir(tree)
})
.process(await read('example.md'))
console.log(String(file))
Now, running node example
yields:
{
type: 'root',
children: [
{type: 'toml', value: 'title = "New Website"', position: [Object]},
{type: 'heading', depth: 1, children: [Array], position: [Object]}
],
position: {
start: {line: 1, column: 1, offset: 0},
end: {line: 6, column: 1, offset: 48}
}
}
+++
title = "New Website"
+++
# Other markdown
API
This package exports no identifiers. The default export is remarkFrontmatter
.
unified().use(remarkFrontmatter[, options])
Configures remark so that it can parse and serialize frontmatter (YAML, TOML, and more). Doesn’t parse the data inside them: create your own plugin to do that.
options
One preset
or Matter
, or an array of them, defining all the supported frontmatters (default: 'yaml'
).
preset
Either 'yaml'
or 'toml'
:
'yaml'
—Matter
defined as{type: 'yaml', marker: '-'}
'toml'
—Matter
defined as{type: 'toml', marker: '+'}
Matter
An object with a type
and either a marker
or a fence
:
type
(string
) — Type to tokenize asmarker
(string
or{open: string, close: string}
) — Character used to construct fences. By providing an object withopen
andclose
different characters can be used for opening and closing fences. For example the character'-'
will result in'---'
being used as the fencefence
(string
or{open: string, close: string}
) — String used as the complete fence. By providing an object withopen
andclose
different values can be used for opening and closing fences. This can be used too if fences contain different characters or lengths other than 3anywhere
(boolean
, default:false
) – iftrue
, matter can be found anywhere in the document. Iffalse
(default), only matter at the start of the document is recognized
Examples
Example: custom marker
A custom frontmatter with different open and close markers, repeated 3 times, that looks like this:
<<<
data
>>>
# hi
…can be supported with:
// …
.use(remarkFrontmatter, {type: 'custom', marker: {open: '<', close: '>'}})
// …
Example: custom fence
A custom frontmatter with custom fences that are not repeated like this:
{
"key": "value"
}
# hi
…can be supported with:
// …
.use(remarkFrontmatter, {type: 'json', fence: {open: '{', close: '}'}})
// …
Example: frontmatter as metadata
This plugin handles the syntax of frontmatter in markdown. It does not parse that frontmatter as say YAML or TOML and expose it somewhere.
In unified, there is a place for metadata about files: file.data
. For frontmatter specifically, it’s customary to expose it at file.data.matter
.
We can make a plugin that does this. This example uses the utility vfile-matter
, which is specific to YAML. To support other data languages, look at this utility for inspiration.
import {matter} from 'vfile-matter'
/**
* Plugin to parse YAML frontmatter and expose it at `file.data.matter`.
*
* @type {import('unified').Plugin<Array<void>>}
*/
export default function myUnifiedPluginHandlingYamlMatter() {
return function (_, file) {
matter(file)
}
}
This plugin can be used as follows:
import {read} from 'to-vfile'
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
import remarkStringify from 'remark-stringify'
import myUnifiedPluginHandlingYamlMatter from './my-unified-plugin-handling-yaml-matter.js'
const file = await unified()
.use(remarkParse)
.use(remarkStringify)
.use(remarkFrontmatter)
.use(myUnifiedPluginHandlingYamlMatter)
.process(await read('example.md'))
console.log(file.data.matter) // Logs an object.
Example: frontmatter in MDX
MDX has the ability to export data from it, where markdown does not. When authoring MDX, you can write export
statements and expose arbitrary data through them. It is also possible to write frontmatter, and let a plugin turn those into export statements.
To automatically turn frontmatter into export statements, use remark-mdx-frontmatter
This plugin can be used as follows:
import {read, write} from 'to-vfile'
import {compile} from '@mdx-js/mdx'
import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
const file = compile(await read('input.mdx'), {
remarkPlugins: [remarkFrontmatter, [remarkMdxFrontmatter, {name: 'matter'}]]
})
file.path = 'output.js'
await write(file)
const mod = await import('./output.js')
console.log(mod.matter) // Logs an object.
Syntax
This plugin applies a micromark extensions to parse the syntax. See its readme for how it works:
The syntax supported depends on the given configuration.
Syntax tree
This plugin applies one mdast utility to build and serialize the AST. See its readme for how it works:
The node types supported in the tree depend on the given configuration.
Types
This package is fully typed with TypeScript. The YAML node type is supported in @types/mdast
by default. To add other node types, register them by adding them to FrontmatterContentMap
:
import type {Literal} from 'mdast'
interface TOML extends Literal {
type: 'toml'
}
declare module 'mdast' {
interface FrontmatterContentMap {
// Allow using toml nodes defined by `remark-frontmatter`.
toml: TOML
}
}
Compatibility
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 unified version 6+ and remark version 13+.
Security
Use of remark-frontmatter
does not involve rehype (hast) or user content so there are no openings for cross-site scripting (XSS) attacks.
Related
remark-yaml-config
— configure remark from YAML configurationremark-gfm
— support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)remark-mdx
— support MDX (JSX, expressions, ESM)remark-directive
— support directivesremark-math
— support math
Contribute
See contributing.md
in remarkjs/.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.