31:[] 2f:{"title":"markdown-it-make-it-all-html","cells":[{"id":0,"value":"# markdown-it-make-it-all-html\n\nYour CMS only handles Markdown and you insist on HTML? Don't you often discover a need for this? What am I doing, after all?\n\n

\n\n

The solution is known to work on [VitePress](https://vitepress.dev/) in the `preConfig` stage.

\n\n

import { defineConfig, type MarkdownRenderer } from 'vitepress'\n    \nfunction allHTMLPlugin(md: MarkdownRenderer) {\n  // md.block.ruler.push('make-it-all-html', ...\n}\n    \nexport default defineConfig({\n  /\\* ... */  \n  markdown: {\n    preConfig(md) {\n      md.use(allHTMLPlugin)\n    },\n  },\n})

\n\n

\n\n*Note that it does not validate the HTML at all. Use it at your own risk.*","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"MarkdownIt = import('https://esm.sh/markdown-it?dev').then(m => m.default)","pinned":true,"hidden":false,"mode":"ojs"},{"id":125,"value":"The \"only\" thing we needs to be aware is to strip the frontmatter before piping it to the processor (which turns out to be more complicated then the job itself, sigh).","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"// NOTE: \"@mdit-vue/plugin-frontmatter\" is a **bugged** implementation, since it only overwrites the render function\n// frontmatterPlugin = import('https://esm.sh/@mdit-vue/plugin-frontmatter?dev').then(m => m.frontmatterPlugin)\n// NOTE: this impl. is borked, since it requires a callback and it is impossible to attach it to the environment\n// frontmatterPlugin = import('https://esm.sh/markdown-it-front-matter?dev').then(m => m.default)\nfrontmatterPlugin = import('https://esm.sh/@gerhobbelt/markdown-it-front-matter@0.2.3-4/index.js?dev').then(m => m.default)","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"yamlParser = import('https://esm.sh/yaml?dev').then(m => m.default)","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"frontmatterPluginConfig = ({\n callback: (meta, token, state) => {\n const fm = yamlParser.parse(meta)\n if (state.env) state.env.frontmatter = fm\n else token.frontmatter = fm\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"function makeItAllHtmlPlugin(md) {\n md.block.ruler.push('make-it-all-html', (state, sl, el, silent) => {\n // console.log('rule', state, sl, el, silent)\n const token = state.push('html_block', '', 0)\n state.line = el\n token.map = [sl, el]\n token.content = state.getLines(sl, el, 0, true)\n return true\n })\n md.block.ruler.enableOnly(['front_matter', 'make-it-all-html'])\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"mit = new MarkdownIt({\n html: true,\n})\n .use(frontmatterPlugin, frontmatterPluginConfig)\n .use(makeItAllHtmlPlugin)","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"doc = \n`---\ntitle: xxx\n---\n

\n\nHello world\n\n

`","pinned":true,"hidden":true,"mode":"ojs"},{"id":81,"value":"{\n const ctx = {}\n const html = mit.render(doc, ctx)\n return [html, ctx]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":112,"value":"If you stop at parsing, the result is stored as the first token. We can let the callback stores the parsed result into it:","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"parsed = mit.parse(doc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"The frontmatter token renders into nothing, effectively stripping the metadata from the document body:","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"mit.renderer.render(parsed, {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"For reference on default CommonMark-compliant parser:","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"{ \n const env = {}\n const html = new MarkdownIt('commonmark')\n .use(frontmatterPlugin, frontmatterPluginConfig).render(doc, env)\n return [html, env]\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}

\n\nHello *world*\n\n

\n\nHello world\n\n