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.
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
Once you've installed this hook, you can use it in your marked configuration. Here's an example of how to configure it:
<!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>
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>
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}!')
Specifies a Schema
to use:
FAILSAFE_SCHEMA
- only strings, arrays and plain objectsJSON_SCHEMA
- all JSON-supported typesCORE_SCHEMA
- same asJSON_SCHEMA
DEFAULT_SCHEMA
- all supported YAML types.
Compatibility with JSON.parse
behavior. If true
, it indicates compatibility with JSON parsing.
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
A project by Stilearning © 2023-2024.