Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

how to add mermaid support?

See original GitHub issue

Following https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/, there might be greater use of mermaid overall. How can one go about adding official mermaid block support to zero-md?

Issue Analytics

State:
Created 2 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

3reactions

zerodevxcommented, Sep 9, 2022

@CetinSert

The demo linked below uses SyncHTML.io. (I am building it.)

Wow! That’s a cool project - looks really good!

the approach suggested above breaks encapsulation.

Unfortunately, yes, mainly because of how mermaid works. For now, the markdown must be rendered into light dom - until first-class support is eventually added into zero-md (soon!). 😞

3reactions

zerodevxcommented, Feb 15, 2022

Hey, thanks for your note. Given that Github now supports mermaid natively, I might add first-class support of this feature in a future release. In the meantime, something like this will work:

<head>
  ...
  <!-- Load mermaid -->
  <script defer src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>    
  <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js"></script>
</head>

<body>
  <!-- Render zero-md in light dom -->
  <zero-md id="app" src="mermaid.md" no-shadow manual-render></zero-md>
  <script>
    app.addEventListener('zero-md-ready', async () => {
      // Create custom marked renderer
      const renderer = new marked.Renderer()
      renderer.code = function (code, lang) {
        return lang === 'mermaid'
          ? `<div class="mermaid">${code}</div>`
          : `<pre><code>${code}</code></pre>`
      }
      await app.render({ renderer })
      mermaid.init()
    })
  </script>
</body>

Here’s a demo: https://plnkr.co/edit/Q64k8e498RfGDdlC