Public
Edited
Nov 17, 2024
1 star
Insert cell
Insert cell
MarkdownIt = import('https://esm.sh/markdown-it?dev').then(m => m.default)
Insert cell
Insert cell
// NOTE: "@mdit-vue/plugin-frontmatter" is a **bugged** implementation, since it only overwrites the render function
// frontmatterPlugin = import('https://esm.sh/@mdit-vue/plugin-frontmatter?dev').then(m => m.frontmatterPlugin)
// NOTE: this impl. is borked, since it requires a callback and it is impossible to attach it to the environment
// frontmatterPlugin = import('https://esm.sh/markdown-it-front-matter?dev').then(m => m.default)
frontmatterPlugin = import('https://esm.sh/@gerhobbelt/markdown-it-front-matter@0.2.3-4/index.js?dev').then(m => m.default)
Insert cell
yamlParser = import('https://esm.sh/yaml?dev').then(m => m.default)
Insert cell
frontmatterPluginConfig = ({
callback: (meta, token, state) => {
const fm = yamlParser.parse(meta)
if (state.env) state.env.frontmatter = fm
else token.frontmatter = fm
}
})
Insert cell
function makeItAllHtmlPlugin(md) {
md.block.ruler.push('make-it-all-html', (state, sl, el, silent) => {
// console.log('rule', state, sl, el, silent)
const token = state.push('html_block', '', 0)
state.line = el
token.map = [sl, el]
token.content = state.getLines(sl, el, 0, true)
return true
})
md.block.ruler.enableOnly(['front_matter', 'make-it-all-html'])
}
Insert cell
mit = new MarkdownIt({
html: true,
})
.use(frontmatterPlugin, frontmatterPluginConfig)
.use(makeItAllHtmlPlugin)
Insert cell
Insert cell
doc =
`---
title: xxx
---
<h1>

Hello *world*

</h1>`
Insert cell
{
const ctx = {}
const html = mit.render(doc, ctx)
return [html, ctx]
}
Insert cell
Insert cell
parsed = mit.parse(doc)
Insert cell
Insert cell
mit.renderer.render(parsed, {})
Insert cell
Insert cell
{
const env = {}
const html = new MarkdownIt('commonmark')
.use(frontmatterPlugin, frontmatterPluginConfig).render(doc, env)
return [html, env]
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more