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-frontmatterUsage
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 asJSON_SCHEMA -
DEFAULT_SCHEMA- all supported YAML types.
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-changelogNow 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 czLicense
A project by Stilearning © 2023.