Markdown → HTML template → mdast/mdast -> HTML?

[shawnbot]

Hi, I'm building a documentation site using eleventy and am leaning heavily on this remark plugin to process Markdown docs and turn code blocks into interactive examples (iframes for CSS insulation and responsive resizing). It's mostly working, but one of the pain points I have right now is that all of the templates for the site live in Nunjucks except this one, which uses the hastscript h() helper to build the tree that replaces the code block nodes. I'd really like the template for the interactive examples to be in Nunjucks (for consistency with other templating and so that it can share filters and macros rather than reimplementing them).

I've figured out how to stringify the code node and pass it as raw content to the template as data, then replace the code node with the rendered markup in a new node with { type: 'html' }. The result is in this CodeSandBox example. I've got it mostly working, with one fatal flaw: When I stringify the code node with mdast-util-to-string I lose all of the highlighting that remark-highlight.js does. I already have the literal code from node.value, but I want the Nunjucks template to be able to output the highlighted code. I guess I could do the highlighting in Nunjucks with a custom filter? 🤷

Anyway, I think that some of this comes down to me not understanding how to get from mdast nodes with hProperties and hChildren (generated from remark-highlight.js) to HTML. I've tried using mdast-util-to-hast then stringifying that with hast-util-to-html, but it yields the same output. Is there a processing step I'm missing? Thank you!

[shawnbot]

Another thing that might be really cool is a hastscript-like tagged template that would allow me to interleave this into my processing pipeline:

hype`
  <section>
    <h2>${node.meta}</h2>
    <iframe srcdoc=${node.value}></iframe>
    ${node}
  </section>
`

...which I guess is possible with rehype-raw, right?

[ChristianMurphy]

#40

[wooorm]

Somewhat similar is, assuming you’d have a preprocessor that compiles JSX away, you could do it with JSX: https://github.com/syntax-tree/hastscript#jsx.

[ChristianMurphy]

It looks like you want to apply the Nunchucks template, then do highlighting?
If so https://codesandbox.io/s/goofy-snow-fns10?file=/src/index.js may work, doing the highlighting on the hast/rehype side, rather than the mdast/remark side.

[wooorm]

• you have a bug with async visitor — those don‘t work, that might be a problem? Your plugin itself is sync (because it doesn‘t return a promise or accept a callback), but the visitor runs async. So this probably introduces a race condition?
• I suggest replacing remark-highlight.js with rehype-highlight, as @ChristianMurphy also mentioned. Highlighting lives more in HTML/hast/rehype space than markdown
• “When I stringify the code node with mdast-util-to-string I lose all of the highlighting [...]” This is not something mdast-util-to-string is for. What mdast-util-to-string does is try to get the text in something (sort of like domNode.innerText or domNode.textContent). There are different projects that get serialized syntax: mdast-util-to-markdown and hast-util-to-html (which are more like domNode.innerHTML / domNode.outerHTML). But: this is also already what remark-stringify or rehype-stringify do (and use!)