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

Uh oh!

how to add mermaid support? #65

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions