remark
How would I parse markdown frontmatter into rehype-document properties
#548
-
|
My objective is similar to #525 but I want to extract title from markdown's frontmatter and use it in What should I use instead of import unified from 'unified';
import markdown from 'remark-parse';
import remark2rehype from 'remark-rehype';
// import doc from 'rehype-document';
import stringify from 'rehype-stringify';
import raw from 'rehype-raw';
import frontmatter from 'remark-frontmatter';
import gfm from 'remark-gfm';
import { select } from 'hast-util-select';
import yaml from 'js-yaml';
const logger = (options) =>
(tree, file) =>
console.log(
JSON.stringify(tree, null, 2).substr(0, 1000),
);
const myPlugin = (options) => {
return (tree, file) => {
console.log(JSON.stringify(tree, null, 2).substr(0, 10000));
// What should I use instead of `'hast-util-select'.select`?
// Expression below logs null.
console.log(select('yaml', tree));
};
};
unified()
.use(markdown)
.use(gfm)
.use(frontmatter)
.use(myPlugin)
.use(remark2rehype, { allowDangerousHtml: true })
.use(raw)
/*.use(doc, {
title: 'TEST',
})*/
.use(stringify)
.process(
`
---
title: foobar
---
# HELLO
`.trim(),
(err, file) => {
// console.log(String(file))
},
); |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
|
https://github.com/mrzmmr/remark-extract-frontmatter would be one approach, then the title would be accessible from |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately this plugin uses remark-frontmatter@1.2.1, not the latest remark-frontmatter@3.0.0 (with micromark). And its inner workings are hard to understand but I will try to dig into it deeper later. |
Beta Was this translation helpful? Give feedback.
-
|
https://github.com/mrzmmr/remark-extract-frontmatter was ported to the new remark and now I can use it. |
Beta Was this translation helpful? Give feedback.
-
|
You could do what I suggested in the similar discussion you linked to above: #525, but now instead of getting it from an h1, you’d get it from the vfile. Alternatively, |
Beta Was this translation helpful? Give feedback.
-
|
I came up with this code: import unified from 'unified';
import markdown from 'remark-parse';
import remark2rehype from 'remark-rehype';
import stringify from 'rehype-stringify';
import raw from 'rehype-raw';
import frontmatter from 'remark-frontmatter';
import extract from 'remark-extract-frontmatter';
import meta from 'rehype-meta';
import gfm from 'remark-gfm';
import yaml from 'yaml';
// npm install --save-dev yaml unified remark-parse remark-rehype rehype-stringify rehype-raw remark-frontmatter remark-extract-frontmatter rehype-meta remark-gfm
const logger = (options) =>
(tree, file) =>
console.log(
JSON.stringify(tree, null, 2).substr(0, 1000),
);
unified()
.use(frontmatter)
.use(extract, { yaml: yaml.parse, name: 'meta' })
.use(markdown)
.use(gfm)
.use(remark2rehype, { allowDangerousHtml: true })
.use(raw)
.use(meta)
.use(stringify)
.process(
`
---
title: foobar
---
# HELLO
`.trim(),
(err, file) => {
console.log(String(file))
},
);It prints: <h1>HELLO</h1><head>
<title>foobar</title>
</head>As you see |
Beta Was this translation helpful? Give feedback.
-
|
var unified = require("unified");
var markdown = require("remark-parse");
var remark2rehype = require("remark-rehype");
var stringify = require("rehype-stringify");
var raw = require("rehype-raw");
var frontmatter = require("remark-frontmatter");
var extract = require("remark-extract-frontmatter");
var doc = require("rehype-document");
var meta = require("rehype-meta");
var gfm = require("remark-gfm");
var yaml = require("yaml");
unified()
.use(markdown)
.use(gfm)
.use(extract, { yaml: yaml.parse, name: "meta" })
.use(frontmatter)
.use(remark2rehype, { allowDangerousHtml: true })
.use(raw)
.use(doc)
.use(meta)
.use(stringify)
.process(
`
---
title: foobar
---
# HELLO
`.trim(),
(err, file) => {
console.log(String(file));
}
);Yields: <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>foobar</title>
</head>
<body>
<h1>HELLO</h1>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
I came up with this code: