标记(Markdown)+美人鱼(流程图) [英] Marked ( Markdown ) + Mermaid ( Flow Chart & Diagrams )
问题描述
努力争取 美人鱼- https://github.com/knsv/mermaid 跟...共事 已标记- https://github.com/chjj/marked
Struggling to get Mermaid - https://github.com/knsv/mermaid to work with Marked - https://github.com/chjj/marked
从我的收集中，我应该能够在markdown中编写以下内容
From what I gather I should be able to write the following in markdown
```
graph TD;A-->B;A-->C;B-->D;C-->D;
```
并渲染
<div class="mermaid">
FLOWCHART / DIAGRAM IS DRAWN HERE
</div>
我想念什么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="libs/jquery.min.js"></script>
<script src="libs/marked.min.js"></script>
<script src="libs/mermaid.full.js"></script>
</head>
<body>
<div id="content"></div>
<script>
var renderer = new marked.Renderer();
renderer.code = function (code, language) {
if(code.match(/^sequenceDiagram/)||code.match(/^graph/)){
return '<div class="mermaid">'+code+'</div>';
}
};
$(document).ready(function(){
$.get( "test.md", function( data ) {
// console.log(data);
$('#content').html(marked(data));
});
});
console.log(marked('```graph TD;A-->B;A-->C;B-->D;C-->D;```', { renderer: renderer }));
</script>
</body>
</html>
推荐答案
我尽可能地测试了您的代码，以使console.log写入美人鱼div.
I tested your code as far as to get the console.log writing the mermaid div.
标记实例化没有问题，渲染器也没有问题.但是...控制台日志中的降价操作不正确.
There is nothing wrong with your marked instantiation and nothing wrong with your renderer. However... the markdown in the console log was not ok.
通过在图形定义之前和之后添加新行，将期望的div打印到控制台.
By adding new lines before and after the graph definition the expeced div was printed to the console.:
\ ngraph TD; A-> B; A-> C; B-> D; C-> D; \ n
\ngraph TD;A-->B;A-->C;B-->D;C-->D;\n
我希望这会有所帮助.
/Knut
这篇关于标记(Markdown)+美人鱼(流程图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
