Skip to content

Instantly share code, notes, and snippets.

@wuzhefang

wuzhefang/marked_mermaid_demo.html

Created July 9, 2019 08:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wuzhefang/acb916631ed8e9b68ba1656ebbdb5f47 to your computer and use it in GitHub Desktop.
Save wuzhefang/acb916631ed8e9b68ba1656ebbdb5f47 to your computer and use it in GitHub Desktop.
Download ZIP
marked + mermaid demo html
Raw
marked_mermaid_demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Marked in the browser</title>
</head>
<body>
<div id="content"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
var renderer = new marked.Renderer();
renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
return '<div class="mermaid">'+code+'</div>';
} else {
return '<pre><code>' + code + '</code></pre>'
}
};
document.getElementById('content').innerHTML =
marked('## demo \n\n```\ngraph LR\nA-->B\nB-->C\nC-->A\nD-->C\n```\n Hello **world!**', { renderer: renderer });
</script>
<script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js"></script>
<script>
mermaid.initialize({startOnLoad:true});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment