Rehype plugin to wrap contents with htm template
npm install remark-frontmatter remark-extract-frontmatter rehype-template
Say example.md looks as follows;
---
title: Example
---
# Example
This is example...and example.js like this:
const vfile = require("to-vfile")
const report = require("vfile-report")
const unified = require("unified")
const remark = require("remark-parse")
const remark2rehype = require("remark-rehype")
const frontmatter = require("remark-frontmatter")
const extract = require("remark-extract-frontmatter")
const stringify = require("rehype-stringify")
const { parse } = require("yaml")
const { html, template, doctype } = require("rehype-template")
const t = (node, frontmatter) => html`
${doctype}
${comment("example")}
<html>
<head>
<title>${frontmatter.title}</title>
</head>
<body>${node}</body>
</html>
`
unified()
.use(remark)
.use(frontmatter)
.use(extract, {yaml: parse})
.use(remark2rehype)
.use(template, {template: t})
.use(stringify)
.process(vfile.readSync("example.md"), (err, file) => {
console.error(report(err || file))
console.log(String(file))
})Now, running node example yields:
<!doctype html><!--example--><html><head><title>Example</title></head><body><h1>Example</h1>
<p>This is example</p></body></html>Wrap the content with options.template, which uses template literal.
options.template(node, frontmatter)nodeSyntax treefrontmatterObject as frontmatter parsed byremark-frontmatterandremark-extract-frontmatter.- This function returns new syntax tree.
Insert a doctype element into a template like the above.
Insert a comment element into a template like the above.
Template literal function defined as htm.bind(h) where h is hastscript.
> const name = "world"
> html`<p>hello, ${name}</p>`The above code yields:
{
type: 'element',
tagName: 'p',
properties: {},
children: [
{ type: 'text', value: 'hello, ' },
{ type: 'text', value: 'world' }
]
}Use of rehype-template should be safe to use as htm should be safe to use. When in doubt, use rehype-sanitize.
MIT © TANIGUCHI Masaya