【问题标题】：Embed markdown (md) into HTML将 markdown (md) 嵌入 HTML
【发布时间】：2016-01-19 22:18:06
【问题描述】：

我需要在 HTML 索引文件中嵌入 Markdown 或 *.md 文件的帮助。我发现我可以在 Markdown 中嵌入 HTML，反之亦然。这将有助于提高我的编辑速度，因为 Markdown 格式非常易于使用（因为我现在正在使用它）而且我不必更改我网站其余部分的格式。我知道这样做是为了用<iframe src="path/to/html>html-name</iframe> 嵌入另一个HTML 文件。我还可以使用 javascript 来解释页面加载时的 md 格式。提前谢谢。

【问题讨论】：

你试过searching吗？
当然！如果我已经找到答案，为什么还要发布问题？
只是好奇，因为该链接似乎可以满足您的要求，除非您的意思是实际上将降价文件注入 HTML
其实这就是我的意思，但是那个链接也有效！我可以在其中嵌入另一个带有降价的 HTML 文档！谢谢
等等...不。刚刚尝试了我现有网站中的代码......不工作。只是一个白屏，我认为主题是相互矛盾的。 ://

标签： javascript html embed markdown

【解决方案1】：

这是我早就忘记的解决方案：

忘记了我问过这个问题并且没有得到任何答案，我创建了自己的解决方案作为 Chris Jeffrey 的 marked.js 的扩展。

我称之为`tagdown.js`。

这里是：http://spikespaz.com/tagdownjs/

以防该链接或我的域过期：https://spikespaz.github.io/tagdownjs/

Github：https://github.com/spikespaz/tagdownjs

这允许在类markdown 的标记集中直接将降价添加到站点。请参阅网站上的示例。里面没有主题系统，就是markdown解析器。

更新

项目 TagdownJS 已从 Github 中删除。它的代码看起来很简单，不值得拥有自己的存储库。

在它找到新家之前，只需找到 Christopher Jeffery 的 Marked.js，并使用以下代码。

document.body.style.display = "none"; // Hide the page until it's finished rendering.

document.createElement("markdown");
var md_tags = document.getElementsByTagName("markdown"); // Returns array of all markdown tags.

for (var i = 0; i < md_tags.length; i++) { // Iterate through all the tags, and generate the HTML.
    var md_text = md_tags[i].textContent.replace(/^[^\S\n]+/mg, ""); // I love regex, so shoot me.

    var md_div = document.createElement("div"); // Make a new div to replace the fake tag.
    md_div.id = "content";
    md_div.innerHTML = marked(md_text);

    md_tags[i].parentNode.appendChild(md_div); // Add remove the old raw markdown.
    md_tags[i].parentNode.removeChild(md_tags[i]);
}

document.body.style.display = ""; // Show the rendered page.

【讨论】：

【解决方案2】：

https://github.com/zhlicen/md.htmzeromd.js 的一个例子只提供md.htm文件和md文件，通过url直接访问：

/md.htm?src=README.md

现场演示：https://b.0-0.plus/blog/md.htm?src=https://raw.githubusercontent.com/microsoft/vscode/main/README.md

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【解决方案3】：

基本上，您需要将 MD 格式解释为 HTML。 Javascript 是一个选项。

以下面为例。（虽然是 Windows，独立于操作系统）

假设一个文件夹 mytest 看起来像，

D:\mytest>dir
 Volume in drive D is Data
 Volume Serial Number is ABCD-EFGH

 Directory of D:\mytest

12/03/2020  10:10 AM    <DIR>          .
12/03/2020  10:10 AM    <DIR>          ..
12/03/2020  10:09 AM             7,973 example-image.jpg
12/03/2020  10:12 AM             4,619 md_html.html
12/03/2020  10:00 AM             2,299 md_html.min.js
               3 File(s)         14,891 bytes
               2 Dir(s)  778,204,147,712 bytes free

D:\mytest>

这里是html的内容，

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.12.0/styles/atom-one-light.min.css" />
  <link rel="stylesheet" href="https://cdn.bootcss.com/github-markdown-css/2.8.0/github-markdown.min.css" />
  <title>Marked In HTML</title>
</head>
<body>
  <template type="markdown">
    Try Marked In HTML ！
    ====
  </template>
</body>
<script src="https://cdn.bootcss.com/marked/0.3.6/marked.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.12.0/languages/javascript.min.js" charset="utf-8"></script>
<script src="md_html.min.js" charset="utf-8"></script>
<script type="text/javascript">
  markedInHtml.init()
</script>
</html>

还有js，

!function(n){function t(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return n[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var e={};t.m=n,t.c=e,t.i=function(n){return n},t.d=function(n,e,r){t.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:r})},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=1)}([function(n,t,e){"use strict";function r(n){return n&&n.__esModule?n:{default:n}}function i(n){if(Array.isArray(n)){for(var t=0,e=Array(n.length);t<n.length;t++)e[t]=n[t];return e}return Array.from(n)}function a(n,t){if(!(n instanceof t))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(t,"__esModule",{value:!0}),t.MarkedInHtml=void 0;var o=function(){function n(n,t){for(var e=0;e<t.length;e++){var r=t[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,r.key,r)}}return function(t,e,r){return e&&n(t.prototype,e),r&&n(t,r),t}}(),u=e(3),l=r(u),s=e(2),c=r(s);t.MarkedInHtml=function(){function n(){a(this,n),l.default.setOptions(this.options||{gfm:!0,tables:!0,breaks:!1,pedantic:!1,sanitize:!1,smartLists:!0,smartypants:!1,highlight:function(n,t,e){return c.default.highlightAuto(n).value}})}return o(n,[{key:"init",value:function(){var n=this;document.querySelectorAll('template[type="markdown"]').forEach(function(t){var e=document.createElement("div");e.innerHTML=n.parse(t),e.id=t.id,e.classList.add(["markdown-body"].concat(i(Array.from(t.classList)))),e.dataset.markdown=n.intelligentProcessingIndent(t),t.parentElement.replaceChild(e,t)})}},{key:"parse",value:function(n){return(0,l.default)(this.intelligentProcessingIndent(n))}},{key:"intelligentProcessingIndent",value:function(n){var t=n.innerHTML.split("\n");t.length&&/^\s*$/.test(t[0])&&t.shift(),t.length&&/^\s*$/.test(t[t.length-1])&&t.pop();var e=Math.min.apply(Math,i(t.map(function(n){return n.length?n.match(/^\s*/)[0].length:1/0})));return t.map(function(n){return n.substring(e)}).join("\n")}}]),n}()},function(n,t,e){"use strict";var r=e(0);window&&(window.markedInHtml=new r.MarkedInHtml)},function(n,t){n.exports=hljs},function(n,t){n.exports=marked}]);

还有jpg，

打开html后应该可以转换了

Try Marked In HTML ！
    ====

进入

您可以尝试更换模板，有些效果可能无法呈现。例如，使用quick markdown example by John Gabriele，方程显示不好。

像?这样的人会建议使用sn-p，但我未能让❄️工作，解析不成功。 ?

【讨论】：

这是我早就忘记的解决方案：

我称之为tagdown.js。

更新

我称之为`tagdown.js`。