Frontmatter is metadata typically found at the beginning of a Markdown file, written in YAML format. This hook allows you to parse and access frontmatter data and the content separately, making it easier to work with Markdown files that contain metadata.

Install

You can install marked-hook-frontmatter using npm or yarn:

npm i marked-sequential-hooks marked-hook-frontmatter
# or
yarn add marked-sequential-hooks marked-hook-frontmatter

Usage

Once you've installed this hook, you can use it in your marked configuration. Here's an example of how to configure it:

Browser

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Marked hook frontmatter</title>
  </head>
  <body>
    <div id="content"></div>

    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked-sequential-hooks/dist/index.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moo/moo.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked-hook-frontmatter/dist/index.umd.min.js"></script>
    <script>
      const md = `---
title: Hello, world!
author: John Doe
---

# Content

This is the main content of your Markdown file autored by **{author}**.
`

      document.getElementById('content').innerHTML = new marked.Marked()
        .use(
          markedSequentialHooks({
            markdownHooks: [markedHookFrontmatter()],
            htmlHooks: [
              (html, data) => {
                console.log(data)

                return html
                  .replace('{title}', data.title)
                  .replace('{author}', data.author)
              }
            ]
          })
        )
        .parse(md)
    </script>
  </body>
</html>

Node.js

import { Marked } from 'marked'
import markedSequentialHooks from 'marked-sequential-hooks'
import markedHookFrontmatter from 'marked-hook-frontmatter'

const markdown = `---
title: Hello, world!
author: John Doe
---

# {page.title}

This is the main content of your Markdown file autored by **{page.author}**.
`

const html = new Marked()
  .use(
    markedSequentialHooks({
      markdownHooks: [markedHookFrontmatter({ dataPrefix: 'page' })],
      htmlHooks: [
        (html, data) => {
          return html
            .replace('{page.title}', data.page.title)
            .replace('{page.author}', data.page.author)
        }
      ]
    })
  )
  .parse(markdown)

console.log(html)

Now, running node example.js yields:

<h1>Hello, world!</h1>
<p>
  This is the main content of your Markdown file autored by
  <strong>John Doe</strong>.
</p>

Options

`dataPrefix?: boolean | string`

The prefix to use for hooks data when adding frontmatter data. If true, the data will be added to the matter property of the hooks data. If a string is provided, the data will be added with that string as the key.

new Marked()
  .use(
    markedSequentialHooks({
      markdownHooks: [markedHookFrontmatter({ dataPrefix: true })],
      htmlHooks: [
        (html, data) => {
          console.log(data.matter) // yields: { foo: 'bar' }

          return html
        }
      ]
    })
  )
  .parse('---\nfoo: bar\n---\nHello, {matter.foo}!')

`schema?: Schema`

Specifies a Schema to use:

FAILSAFE_SCHEMA - only strings, arrays and plain objects
JSON_SCHEMA - all JSON-supported types
CORE_SCHEMA - same as JSON_SCHEMA
DEFAULT_SCHEMA - all supported YAML types.

`json?: boolean`

Compatibility with JSON.parse behavior. If true, it indicates compatibility with JSON parsing.

Contributing

We 💛 issues.

When committing, please conform to the semantic-release commit standards. Please install commitizen and the adapter globally, if you have not already.

npm i -g commitizen cz-conventional-changelog

Now you can use git cz or just cz instead of git commit when committing. You can also use git-cz, which is an alias for cz.

git add . && git cz

License

GitHub

Keywords

FAQs

What is marked-hook-frontmatter?

Is marked-hook-frontmatter popular?

Is marked-hook-frontmatter well maintained?

Package last updated on 29 Aug 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

marked-hook-frontmatter