• Stars
    star
    253
  • Rank 160,776 (Top 4 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

remark plugin to support frontmatter (YAML, TOML, and more)

remark-frontmatter

Build Coverage Downloads Size Sponsors Backers Chat

remark plugin to support frontmatter (YAML, TOML, and more).

Contents

What is this?

This package is a unified (remark) plugin to add support for YAML, TOML, and other frontmatter.

Frontmatter is a metadata format in front of the content. It’s typically written in YAML and is often used with markdown.

This plugin follow how GitHub handles frontmatter. GitHub only supports YAML frontmatter, but this plugin also supports different flavors (such as TOML).

When should I use this?

You can use frontmatter when you want authors, that have some markup experience, to configure where or how the content is displayed or supply metadata about content, and know that the markdown is only used in places that support frontmatter. A good example use case is markdown being rendered by (static) site generators.

If you just want to turn markdown into HTML (with maybe a few extensions such as frontmatter), we recommend micromark with micromark-extension-frontmatter instead. If you don’t use plugins and want to access the syntax tree, you can use mdast-util-from-markdown with mdast-util-frontmatter.

Install

This package is ESM only. In Node.js (version 16+), install with npm:

npm install remark-frontmatter

In Deno with esm.sh:

import remarkFrontmatter from 'https://esm.sh/remark-frontmatter@5'

In browsers with esm.sh:

<script type="module">
  import remarkFrontmatter from 'https://esm.sh/remark-frontmatter@5?bundle'
</script>

Use

Say our document example.md contains:

+++
layout = "solar-system"
+++

# Jupiter

…and our module example.js contains:

import remarkFrontmatter from 'remark-frontmatter'
import remarkParse from 'remark-parse'
import remarkStringify from 'remark-stringify'
import {unified} from 'unified'
import {read} from 'to-vfile'

const file = await unified()
  .use(remarkParse)
  .use(remarkStringify)
  .use(remarkFrontmatter, ['yaml', 'toml'])
  .use(function () {
    return function (tree) {
      console.dir(tree)
    }
  })
  .process(await read('example.md'))

console.log(String(file))

…then running node example.js yields:

{
  type: 'root',
  children: [
    {type: 'toml', value: 'layout = "solar-system"', position: [Object]},
    {type: 'heading', depth: 1, children: [Array], position: [Object]}
  ],
  position: {
    start: {line: 1, column: 1, offset: 0},
    end: {line: 6, column: 1, offset: 43}
  }
}
+++
layout = "solar-system"
+++

# Jupiter

API

This package exports no identifiers. The default export is remarkFrontmatter.

unified().use(remarkFrontmatter[, options])

Add support for frontmatter.

Parameters
  • options (Options, default: 'yaml') β€” configuration
Returns

Nothing (undefined).

Notes

Doesn’t parse the data inside them: create your own plugin to do that.

Options

Configuration (TypeScript type).

Type
type Options = Array<Matter | Preset> | Matter | Preset

/**
 * Sequence.
 *
 * Depending on how this structure is used, it reflects a marker or a fence.
 */
export type Info = {
  /**
   * Closing.
   */
  close: string
  /**
   * Opening.
   */
  open: string
}

/**
 * Fence configuration.
 */
type FenceProps = {
  /**
   * Complete fences.
   *
   * This can be used when fences contain different characters or lengths
   * other than 3.
   * Pass `open` and `close` to interface to specify different characters for opening and
   * closing fences.
   */
  fence: Info | string
  /**
   * If `fence` is set, `marker` must not be set.
   */
  marker?: never
}

/**
 * Marker configuration.
 */
type MarkerProps = {
  /**
   * Character repeated 3 times, used as complete fences.
   *
   * For example the character `'-'` will result in `'---'` being used as the
   * fence
   * Pass `open` and `close` to specify different characters for opening and
   * closing fences.
   */
  marker: Info | string
  /**
   * If `marker` is set, `fence` must not be set.
   */
  fence?: never
}

/**
 * Fields describing a kind of matter.
 *
 * > πŸ‘‰ **Note**: using `anywhere` is a terrible idea.
 * > It’s called frontmatter, not matter-in-the-middle or so.
 * > This makes your markdown less portable.
 *
 * > πŸ‘‰ **Note**: `marker` and `fence` are mutually exclusive.
 * > If `marker` is set, `fence` must not be set, and vice versa.
 */
type Matter = (MatterProps & FenceProps) | (MatterProps & MarkerProps)

/**
 * Fields describing a kind of matter.
 */
type MatterProps = {
  /**
   * Node type to tokenize as.
   */
  type: string
  /**
   * Whether matter can be found anywhere in the document, normally, only matter
   * at the start of the document is recognized.
   *
   * > πŸ‘‰ **Note**: using this is a terrible idea.
   * > It’s called frontmatter, not matter-in-the-middle or so.
   * > This makes your markdown less portable.
   */
  anywhere?: boolean | null | undefined
}

/**
 * Known name of a frontmatter style.
 */
type Preset = 'toml' | 'yaml'

Examples

Example: different markers and fences

Here are a couple of example of different matter objects and what frontmatter they match.

To match frontmatter with the same opening and closing fence, namely three of the same markers, use for example {type: 'yaml', marker: '-'}, which matches:

---
key: value
---

To match frontmatter with different opening and closing fences, which each use three different markers, use for example {type: 'custom', marker: {open: '<', close: '>'}}, which matches:

<<<
data
>>>

To match frontmatter with the same opening and closing fences, which both use the same custom string, use for example {type: 'custom', fence: '+=+=+=+'}, which matches:

+=+=+=+
data
+=+=+=+

To match frontmatter with different opening and closing fences, which each use different custom strings, use for example {type: 'json', fence: {open: '{', close: '}'}}, which matches:

{
  "key": "value"
}

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 parsed data 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.

my-unified-plugin-handling-yaml-matter.js:

/**
 * @typedef {import('unist').Node} Node
 * @typedef {import('vfile').VFile} VFile
 */

import {matter} from 'vfile-matter'

/**
 * Parse YAML frontmatter and expose it at `file.data.matter`.
 *
 * @returns
 *   Transform.
 */
export default function myUnifiedPluginHandlingYamlMatter() {
  /**
   * Transform.
   *
   * @param {Node} tree
   *   Tree.
   * @param {VFile} file
   *   File.
   * @returns {undefined}
   *   Nothing.
   */
  return function (tree, file) {
    matter(file)
  }
}

…with an example markdown file example.md:

---
key: value
---

# Venus

…and using the plugin with an example.js containing:

import remarkParse from 'remark-parse'
import remarkFrontmatter from 'remark-frontmatter'
import remarkStringify from 'remark-stringify'
import {read} from 'to-vfile'
import {unified} from 'unified'
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) // => {key: 'value'}

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.

With an example.mdx as follows:

---
key: value
---

# Mars

This plugin can be used as follows:

import {compile} from '@mdx-js/mdx'
import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
import {read, write} from 'to-vfile'

const file = await compile(await read('example.mdx'), {
  remarkPlugins: [remarkFrontmatter, [remarkMdxFrontmatter, {name: 'matter'}]]
})
file.path = 'output.js'
await write(file)

const mod = await import('./output.js')
console.log(mod.matter) // => {key: 'value'}

Authoring

When authoring markdown with frontmatter, it’s recommended to use YAML frontmatter if possible. While YAML has some warts, it works in the most places, so using it guarantees the highest chance of portability.

In certain ecosystems, other flavors are widely used. For example, in the Rust ecosystem, TOML is often used. In such cases, using TOML is an okay choice.

When possible, do not use other types of frontmatter, and do not allow frontmatter anywhere.

HTML

Frontmatter does not relate to HTML elements. It is typically stripped, which is what remark-rehype does.

CSS

This package does not relate to CSS.

Syntax

See Syntax in micromark-extension-frontmatter.

Syntax tree

See Syntax tree in mdast-util-frontmatter.

Types

This package is fully typed with TypeScript. It exports the additional type Options.

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 {Data, Literal} from 'mdast'

interface Toml extends Literal {
  type: 'toml'
  data?: Data
}

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 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, remark-frontmatter@^5, compatible with Node.js 16.

This plugin works with unified 6+ and remark 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

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.

License

MIT Β© Titus Wormer

More Repositories

1

react-markdown

Markdown component for React
JavaScript
12,885
star
2

remark

markdown processor powered by plugins part of the @unifiedjs collective
JavaScript
7,513
star
3

remark-lint

plugins to check (lint) markdown code style
JavaScript
936
star
4

remark-gfm

remark plugin to support GFM (autolink literals, footnotes, strikethrough, tables, tasklists)
JavaScript
701
star
5

remark-react

Legacy plugin to transform to React β€” please use `remark-rehype` and `rehype-react` instead
JavaScript
524
star
6

remark-toc

plugin to generate a table of contents (TOC)
JavaScript
408
star
7

awesome-remark

Curated list of awesome remark resources
374
star
8

remark-math

remark and rehype plugins to support math
JavaScript
364
star
9

remark-html

plugin to add support for serializing HTML
JavaScript
312
star
10

remark-rehype

plugin that turns markdown into HTML to support rehype
JavaScript
258
star
11

remark-directive

remark plugin to support directives
JavaScript
247
star
12

react-remark

React component and hook to use remark to render markdown
TypeScript
201
star
13

remark-github

remark plugin to link references to commits, issues, pull-requests, and users, like on GitHub
JavaScript
173
star
14

strip-markdown

plugin remove Markdown formatting
JavaScript
134
star
15

remark-breaks

plugin to add break support, without needing spaces
JavaScript
116
star
16

remark-validate-links

plugin to check that Markdown links and images reference existing files and headings
JavaScript
109
star
17

remark-man

plugin to compile markdown to man pages
JavaScript
93
star
18

remark-slug

Legacy plugin to add `id`s to headings β€” please use `rehype-slug`
JavaScript
89
star
19

remark-lint-no-dead-urls

Ensure that external links in your Markdown are alive
JavaScript
77
star
20

remark-unwrap-images

plugin to remove the wrapping paragraph for images
JavaScript
75
star
21

remark-highlight.js

Legacy plugin to highlight code blocks with highlight.js β€” please use `rehype-highlight` instead
JavaScript
70
star
22

remark-autolink-headings

Legacy remark plugin to automatically add links to headings β€” please use `rehype-autolink-headings` instead
JavaScript
64
star
23

remark-external-links

Legacy plugin to automatically add target and rel attributes to external links β€” please use `rehype-external-links` instead
JavaScript
56
star
24

vscode-remark

Lint and format markdown code with remark
JavaScript
54
star
25

remark-vdom

Legacy plugin to compile Markdown to Virtual DOM β€” please use `remark-rehype` and then something like `rehype-react`
JavaScript
45
star
26

remark-usage

plugin to add a usage example to your readme
JavaScript
42
star
27

remark-gemoji

plugin to turn gemoji shortcodes into emoji πŸ‘
JavaScript
41
star
28

remark-footnotes

Legacy plugin to add support for pandoc footnotes β€” please use `remark-gfm` instead
JavaScript
40
star
29

remark-images

plugin to add a simpler image syntax
JavaScript
35
star
30

remark-textr

plugin to make your typography better with Textr
JavaScript
35
star
31

remark-language-server

A language server to lint and format markdown files with remark
JavaScript
33
star
32

remark-embed-images

plugin to embed local images as data URIs
HTML
33
star
33

remark-jsx

A simple way to use React inside Markdown.
JavaScript
28
star
34

remark-reference-links

plugin to change links and images to references with separate definitions
JavaScript
25
star
35

remark-retext

plugin to transform from remark (Markdown) to retext (natural language)
JavaScript
25
star
36

remark-inline-links

plugin to change references and definitions into normal links and images
JavaScript
23
star
37

remark-contributors

plugin to generate a list of contributors
JavaScript
22
star
38

remark-license

plugin to generate a license section
JavaScript
19
star
39

remark-defsplit

plugin to change links and images to references with separate definitions
JavaScript
19
star
40

remark-bookmarks

plugin to manage links
JavaScript
15
star
41

remark-comment-config

plugin to configure remark with comments
JavaScript
14
star
42

remark-git-contributors

plugin to generate a list of Git contributors
JavaScript
12
star
43

remark-normalize-headings

plugin to make sure there is a single top level heading in a document by adjusting heading ranks accordingly
JavaScript
11
star
44

remark-squeeze-paragraphs

plugin to remove empty (or white-space only) paragraphs
JavaScript
10
star
45

remark-strip-badges

plugin to strip badges (such as shields.io)
JavaScript
9
star
46

gulp-remark

Legacy Gulp plugin for remark β€” please use npm scripts and the like
JavaScript
9
star
47

remark-yaml-config

plugin to configure remark with YAML frontmatter
JavaScript
8
star
48

remark-message-control

plugin to enable, disable, and ignore messages
JavaScript
8
star
49

.github

Community health files for remark
TypeScript
7
star
50

remark-unlink

plugin to remove all links, images, references, and definitions
JavaScript
6
star
51

remark-heading-gap

plugin to adjust the gap between headings in markdown
JavaScript
6
star
52

ideas

Share ideas for new utilities and tools built with @remarkjs
5
star
53

remark-word-wrap

Please use something like https://github.com/prettier/prettier instead
JavaScript
4
star
54

grunt-remark

Grunt task for remark
4
star
55

remark-midas

plugin to highlight CSS code blocks with midas
3
star
56

remark-comment-blocks

Use something like https://github.com/3rd-Eden/commenting instead
JavaScript
2
star
57

governance

How @remarkjs and the projects under it are governed
2
star