为什么 Markdown 中没有嵌入 html 图表？答案

【问题标题】：Why doesn't an html diagram embedded in Markdown?为什么 Markdown 中没有嵌入 html 图表？
【发布时间】：2020-04-15 13:54:49
【问题描述】：

我正在Marktext写一篇科学论文，我希望将下面的html图表嵌入到markdown（在draw.io创建）

<!DOCTYPE html>
<html>
<head>
   <title>--updated</title>
<meta charset="utf-8"/>
</head>
<body>
   <div class="mxgraph" 
        style="max-width:100%;border:1px solid transparent;" 
        data-mxgraph="{&quot;highlight&quot;:&quot;#666666&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;Electron\&quot; modified=\&quot;2020-04-15T13:27:33.398Z\&quot; agent=\&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/12.9.9 Chrome/80.0.3987.163 Electron/8.2.1 Safari/537.36\&quot; etag=\&quot;7Y_i_u__cC6k-86I6LFA\&quot; version=\&quot;12.9.9\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;S9mogTuWuYmF0rAw_yv_\&quot; name=\&quot;Page-1\&quot;&gt;xZTJTsMwEIafJseiNG7acoS2wAUVVCEoF2TFQ2LkxJHjNilPj4MneysWCXGJPJ/tWf6Z2CGLuLhWNI1uJQPheC4rHLJ0PM+f++ZbgoMFhMwtCBVnFo0bsOHvgNBFuuMMss5BLaXQPO3CQCYJBLrDqFIy7x57laIbNaUhDMAmoGJIHznTkaVzb9bwG+BhVEUeT8/tTkyrw1hJFlEm8xYiK4cslJTaruJiAaLUrtLF3rs6sVsnpiDR37nwkI1e6FbNH/n2ef22ul+m6/UIveyp2GHBF5itPlQSKLlLGJRexg65zCOuYZPSoNzNTc8Ni3QscBv9gdJQnEx0XJdvxgZkDFodzBG84PmoGI6MN0M7bxowRRS1tK8YxZaHtedGFbNAYX4gkjcQaaARJOyinDZjBYJmGQ+6skDB9VNrvTVr98xHa1lW7lbGAQ0bBNhgQHtCmkTkTgXwVZuHgrcE9Y8IWjEFgmq+76ZxTGWMcCe5SbDu58Tr9pNMeo2y6eOt9gT3HZGeI7fnSFMVgh44+mx6Xfbv54AM5uDy33+WviZ/+LMYs3mtrKbNk09WHw==&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}">
   </div>
<script type="text/javascript" src="https://app.diagrams.net/js/viewer.min.js">
</script>
</body>
</html>

但是，我在 SO 上寻找了其他方法（例如 this 和 this），但它们没有奏效。我将不胜感激此问题的任何解决方案。

编辑：当我尝试将其放入 Marktext 的 HTML 块中时，我看到以下内容：

style="max-width:100%;border:1px solid transparent;"
 data-mxgraph="{"highlight":"#666666","nav":true,"resize":true,"toolbar":"zoom layers lightbox","edit":"_blank","xml":"<mxfile host=\"Electron\" modified=\"2020-04-15T13:27:33.398Z\" agent=\"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/12.9.9 Chrome/80.0.3987.163 Electron/8.2.1 Safari/537.36\" etag=\"7Y_i_u__cC6k-86I6LFA\" version=\"12.9.9\" type=\"device\"><diagram id=\"S9mogTuWuYmF0rAw_yv_\" name=\"Page-1\">xZTJTsMwEIafJseiNG7acoS2wAUVVCEoF2TFQ2LkxJHjNilPj4MneysWCXGJPJ/tWf6Z2CGLuLhWNI1uJQPheC4rHLJ0PM+f++ZbgoMFhMwtCBVnFo0bsOHvgNBFuuMMss5BLaXQPO3CQCYJBLrDqFIy7x57laIbNaUhDMAmoGJIHznTkaVzb9bwG+BhVEUeT8/tTkyrw1hJFlEm8xYiK4cslJTaruJiAaLUrtLF3rs6sVsnpiDR37nwkI1e6FbNH/n2ef22ul+m6/UIveyp2GHBF5itPlQSKLlLGJRexg65zCOuYZPSoNzNTc8Ni3QscBv9gdJQnEx0XJdvxgZkDFodzBG84PmoGI6MN0M7bxowRRS1tK8YxZaHtedGFbNAYX4gkjcQaaARJOyinDZjBYJmGQ+6skDB9VNrvTVr98xHa1lW7lbGAQ0bBNhgQHtCmkTkTgXwVZuHgrcE9Y8IWjEFgmq+76ZxTGWMcCe5SbDu58Tr9pNMeo2y6eOt9gT3HZGeI7fnSFMVgh44+mx6Xfbv54AM5uDy33+WviZ/+LMYs3mtrKbNk09WHw==</diagram></mxfile>"}">

这只是原始的 html，没有显示图表。（我没有将 javascript 添加到 Marktext 中）

【问题讨论】：

到底发生了什么？它只是没有出现吗？你看到一个空白区域吗？错误信息？ ...
@griffin 为了进一步澄清，我没有看到我的问题中显示的语法突出显示；纯文本

标签： javascript html markdown

【解决方案1】：

你能做什么！

Export your image as as a URL first and copy that URL

在你必须插入图片的地方输入这个

!()[]    

![here name that image whatever you want](Here you have to paste that link that you copied)

例如：

![My image](https://https://app.diagrams.net?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1)

【讨论】：

谢谢！这是我最后采用的方法。

【解决方案2】：

您需要插入一个文档片段而不是整个文档。

DOCTYPE、html、head 和 body 标记在文档中只能出现一次。通常，当 Markdown 呈现为 HTML 时，HTML 将被放置（在body 标签内）包含这些标签的文档中。因此，它们不应包含在您的 Markdown 中。只需包含属于 body 标记的项目即可。像这样：

<div class="mxgraph" 
     style="max-width:100%;border:1px solid transparent;" 
     data-mxgraph="{&quot;highlight&quot;:&quot;#666666&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;Electron\&quot; modified=\&quot;2020-04-15T13:27:33.398Z\&quot; agent=\&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/12.9.9 Chrome/80.0.3987.163 Electron/8.2.1 Safari/537.36\&quot; etag=\&quot;7Y_i_u__cC6k-86I6LFA\&quot; version=\&quot;12.9.9\&quot; type=\&quot;device\&quot;&gt;&lt;diagram id=\&quot;S9mogTuWuYmF0rAw_yv_\&quot; name=\&quot;Page-1\&quot;&gt;xZTJTsMwEIafJseiNG7acoS2wAUVVCEoF2TFQ2LkxJHjNilPj4MneysWCXGJPJ/tWf6Z2CGLuLhWNI1uJQPheC4rHLJ0PM+f++ZbgoMFhMwtCBVnFo0bsOHvgNBFuuMMss5BLaXQPO3CQCYJBLrDqFIy7x57laIbNaUhDMAmoGJIHznTkaVzb9bwG+BhVEUeT8/tTkyrw1hJFlEm8xYiK4cslJTaruJiAaLUrtLF3rs6sVsnpiDR37nwkI1e6FbNH/n2ef22ul+m6/UIveyp2GHBF5itPlQSKLlLGJRexg65zCOuYZPSoNzNTc8Ni3QscBv9gdJQnEx0XJdvxgZkDFodzBG84PmoGI6MN0M7bxowRRS1tK8YxZaHtedGFbNAYX4gkjcQaaARJOyinDZjBYJmGQ+6skDB9VNrvTVr98xHa1lW7lbGAQ0bBNhgQHtCmkTkTgXwVZuHgrcE9Y8IWjEFgmq+76ZxTGWMcCe5SbDu58Tr9pNMeo2y6eOt9gT3HZGeI7fnSFMVgh44+mx6Xfbv54AM5uDy33+WviZ/+LMYs3mtrKbNk09WHw==&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}">
</div>
<script type="text/javascript" src="https://app.diagrams.net/js/viewer.min.js">
</script>

请注意。出于安全原因，上述内容不适用于许多网站。您包含了一个script 标记，它将导致第三方脚本在页面上运行。这是一个常见的攻击向量。因此，许多网站（如堆栈溢出）将删除或禁用任何此类标签。在这种情况下，使用图表的图像是另一个答案中突出显示的合理选择。

【讨论】：