Skip to content

Latest commit

 

History

History

hook-frontmatter

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

marked-hook-frontmatter

A sequential hook for marked to support frontmatter in Markdown documents.

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/[email protected]/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>

Try marked-hook-frontmatter on RunKit

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:

json?: boolean

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

Related

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

A project by Stilearning © 2023-2024.