gpt4 book ai didi

javascript - 标记(Markdown)+美人鱼(流程图和图表)

转载 作者:行者123 更新时间:2023-11-29 15:36:12 27 4
gpt4 key购买 nike

努力争取美人鱼 - https://github.com/knsv/mermaid跟...共事已标记 - https://github.com/chjj/marked

据我所知,我应该能够在 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。

您标记的实例化没有问题,您的渲染器也没有问题。但是...控制台日志中的 Markdown 不正常。

通过在图形定义之前和之后添加新行,期望的 div 被打印到控制台。:

\n图表TD;A-->B;A-->C;B-->D;C-->D;\n

希望对您有所帮助。

/克努特

关于javascript - 标记(Markdown)+美人鱼(流程图和图表),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28626329/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com