Getting code fence language via custom plugin

[mturoci]

Hey @wooorm, first of all congrats on the amazing ecosystem of parsing libraries.

I am trying to parse markdown (GFM) and render an HTML within a Svelte app (framework is not important) with syntax highlighting for code blocks.

I found rehype-prism which could potentially be what I am after, but I would prefer to stick with micromark as it seems much more lightweight and suited for browser environment.

My component currently renders markdown into HTML, then looks for code blocks and highlights them imperatively.

<script lang="ts">
  import hljs from 'highlight.js/lib/core'
  import { micromark, type Options } from 'micromark'
  import { gfm, gfmHtml } from 'micromark-extension-gfm'

  export let content = ''

  const opts: Options = {
    allowDangerousHtml: false,
    extensions: [gfm()],
    htmlExtensions: [gfmHtml()],
  }
  function highlight(node: HTMLDivElement) {
    node.querySelectorAll('code').forEach(codeEl => {
      hljs.highlightElement(codeEl)
    })
  }
</script>

<div use:highlight>
  {@html micromark(content, opts)}
</div>

Since I do not know what languages to load in advance as I would like to support literally any, I need to load the languages dynamically. For that, I need to parse the language name from the markdown code fence block, via custom plugin.

I understand that I can hook into various parsing phases. What is not clear though is how can I get the original markdown string content I passed. Once I get that, I can parse it via token start/end I guess.

Also if there is a better way of achieving all the above, please let me know. Any guidance is hugely appreciated!

[wooorm]

The code blocks will have a class, language-js for example. You can pick those. You don’t need to get into parsing phases.
Here’s an example: https://github.com/wooorm/starry-night#example-using-starry-night-on-the-client

[mturoci]

That was my backup plan and also what I feared as it seems dirty, but I guess I will need to live with that. Thanks for the suggestion!

[wooorm]

It’s recommended by the HTML spec.
That’s why markdown does it.
And it’s supported by all client side highlighters.
So definitely not “dirty”!