search

showdownjs / showdown

A bidirectional Markdown to HTML to Markdown converter written in Javascript
http://www.showdownjs.com/
MIT License
14.26k stars 1.56k forks source link

mermaid support #886

Closed giorgiobazzo closed 2 years ago

giorgiobazzo commented 2 years ago

Is there any way to make Showdown support markdown content with mermaid elements?

cwhinton commented 2 years ago

Here's what I've done to get mermaid support using Showdown to render it strictly in the browser: I've attached the extension file (renamed to .txt).

I structure my html document like this:

<head>
<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
<script type="text/javascript" src="https://myhostingurl.here/mermaidForShowdown.js"></script>
</head>
<body>
<div id="markdown">
# Markdown text here
Some mermaid
::: mermaid
    flowchart TD
    id1([Thing1])
    id2([Thing2])
    id3[[Thing3]]
    id4[[Thing4]]
    id5([Thing5])
    id6([Thing6])
    id1 <--> id3 <--> id5
    id2 --> id6 --> id4 --> id5
:::
</div>
<script>
    var target = document.getElementById('markdown'),
    converter = new showdown.Converter({extensions:['mermaid']});
    converter.setOption('tables','true');
    converter.setOption('strikethrough','true');
    var text = document.getElementById('markdown').innerHTML;
    var html = converter.makeHtml(text);
    target.innerHTML = html;
</script>
<script>
    mermaid.initialize({
      startOnLoad: true,
      logLevel: 2
    });
  </script>
</body>

mermaidForShowdown.txt

giorgiobazzo commented 2 years ago

Thank you very much @cwhinton, your example helped a lot, I just had to change the mermaidForShowdown.js script to use ``` mermaid instead of ::: mermaid , because the application is integrated with gitlab and there the markdown editor waits for ``` mermaid

mermaidForShowdown.txt

SyntaxRules commented 2 years ago

Thanks @cwhinton . If either you or @giorgiobazzo are interested in maintaining an official mermaid extension in the showdown org then let me know and I'll create a repo and permissions for you!

@giorgiobazzo I think your issue was resolved, so I will close this for now. Let me know if we need to re-open.