Render mermaid on github pages with simple code #772
Comments
|
I have a similar request related to GitHub Pages. The HTML rendered by Jekyll, when it encounters a code block such as the above, looks like <code class="language-mermaid">
# some mermaid code
</code>Would it be possible for mermaid to replace such a code tag with a diagram? |
|
I posted a mermaid code here. I included some js to convert it but failed, the js was like the file {% if page.mermaid == true %}
<!-- <script> -->
<!-- window.Lazyload.js('https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js', function() { -->
<!-- mermaid.initialize({ -->
<!-- startOnLoad: true -->
<!-- }); -->
<!-- mermaid.init(undefined, '.language-mermaid'); -->
<!-- }); -->
<!-- </script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
var config = {
startOnLoad:true,
theme: 'forest',
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
</script>
{% endif %}PS: I have little knowledge or experience about javascript. The code was inspired by TexT jekyll theme. I tried to contact the author of TexT but he never replied... |
|
I found the solution. Just put everything after <!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
</head>
<body>
<pre><code class="language-mermaid">graph LR
A-->B
</code></pre>
<div class="mermaid">graph LR
A-->B
</div>
</body>
<script>
var config = {
startOnLoad:true,
theme: 'forest',
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>
</html>it works great on my site. If anyone need the source code, you can see these two files. _include/mermaid.html and _layout/post.html |
|
Please update broken link. That approach can be improved so that JS is injected only that page actually has Mermaid code in it. The |
|
Here is the best I've got so far. {%- if content contains 'mermaid' -%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
const config = {
startOnLoad:true,
theme: 'forest',
flowchart: {
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>
{% endif %}This could be a little better if 'mermaid' could include the code fence part ```. But I'm not sure how to escape that into the Liquid string literal above. |
@fulldecent , where should this code be inserted? |
Probably into your _layouts/post.html or an include if that uses an include. |
I have been trying to find a way to render mermaid in markdown simply by using
in markdown, and use javascript in the page to render it.
I tried many solutions and faild. One of the solution I found is to use code from here but that's not correct. I am wondering if the author of this awesome js can give me a solution to acheive that and add that to the documentation?
Also I could not find the docs folder @knsv mensioned in #215.
The text was updated successfully, but these errors were encountered: