zero-md
zero-md copied to clipboard
zerodevx
how to add mermaid support?
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?
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
This was exactly what I was looking for! Awesome project, thanks a lot :)
@zerodevx – the approach suggested above breaks encapsulation.
<zero-md> is the only third-party custom element I have seen that behaves like the standard elements of HTML in that it does not gain attributes on getting connected to a document or leaks state in other weird ways.
Demo of just how awesome <zero-md> is
The demo linked below uses RTCode.io. (I am building it.)
See what we mean with the following steps:
- Go to
md.rt.ht/?👈🏻 - Press ↑/↓ keys
- Notice the video does not restart on edit. This is all because you are doing custom elements right™ ❤️!
SyncHTML.io – the next-gen, no-reload, real-time web playground with instant two-way input ⇄ output sync. (try, learn more)
RTCode.io ❤️ <zero-md>
Dear @zerodevx,
We have dedicated the short domain md.rt.ht to the latest stable version of <zero-md>!
It is the shortest domain you can get that serves as an editable quick starting point! See below ↙️!
In the address bar of your browser:
| type | get |
|---|---|
md.rt.ht/? |
editor |
md.rt.ht |
output |
All you need is a single /? to edit your edge-deployed syncs!
Just hit Ctrl+S1 to update it in 275+ cities around the world!
(1 RTEdge.net restricts saves/updates to Elefunc, Inc. until we reach public beta.)
Best Regards, @CetinSert
@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!). 😞