processor = unified()
.use(remarkParse)
.use(remarkFrontmatter)
.use(function(options) {
const data = this.data()
const flowInner = {
name: 'allHtml',
tokenize: myFlowTokenizer,
concrete: true,
}
data.micromarkExtensions.push({
flow: {
null: [flowInner],
},
disable: {
null: ['headingAtx', 'thematicBreak', 'setextUnderline', 'htmlFlow', 'codeFenced'],
},
})
})
.use(function() {
return (data, tree) => vfileMatter(tree)
})
.use(remarkRehype, { allowDangerousHtml: true })
function myFlowTokenizer(effects, ok, nok) {
const self = this
return start
function start(code) {
effects.enter('htmlFlow')
return open(code)
}
function open(code) {
effects.enter('htmlFlowData')
return content(code)
}
function content(code) {
// eof
if (code === null) {
effects.exit('htmlFlowData')
effects.exit('htmlFlow')
return ok(code)
}
// line ending
if (code < -2) {
effects.enter('lineEnding')
effects.consume(code)
effects.exit('lineEnding')
effects.exit('htmlFlowData')
return open
}
effects.consume(code)
return content
}
}
doc = `---
title: hello
---
# xxx
\`\`\`
zz
\`\`\`
## more title
xxx
yyyy **zz**`
data = {
const file = new VFile({
path: 'hello.md',
value: doc,
})
try {
const ast = processor.parse(file)
const out = await processor.run(ast, file)
console.log('out', out)
return [out, file]
} catch (e) { console.error(e); throw e }
}
unified = import('https://esm.sh/unified@^11').then(m => m.unified)
VFile = import('https://esm.sh/vfile@6').then(m => m.VFile)
vfileMatter = import('https://esm.sh/vfile-matter@^5').then(m => m.matter)
remarkParse = import('https://esm.sh/remark-parse@^11?dev').then(m => m.default)
remarkFrontmatter = import('https://esm.sh/remark-frontmatter@^5').then(m => m.default)
rehypeParse = import('https://esm.sh/rehype-parse@^9').then(m => m.default)
remarkRehype = import('https://esm.sh/remark-rehype@^11').then(m => m.default)
rehypeStringify = import('https://esm.sh/rehype-stringify@^10').then(m => m.default)
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.
