我需要帮助将一个Markdown或*.md文件嵌入到HTML索引文件中。我发现可以在Markdown中嵌入HTML，但反过来不行。这将有助于提高我的编辑速度，因为Markdown格式非常容易使用（就像我现在使用的一样），而且我不必改变网站的其余格式。我知道可以使用类似以下代码嵌入另一个HTML文件：<iframe src="path/to/html>html-name</iframe>。我还可以使用JavaScript在页面加载时解释md格式。提前感谢。
将Markdown（md）嵌入HTML
15
- Jacob Birkett
8
3你尝试过搜索吗？ - OneCricketeer
4当然！如果我已经找到答案，为什么还要发问题呢？ - Jacob Birkett
其实这就是我想表达的，但那个链接也可以！我可以在另一个包含Markdown的HTML文档中嵌入它！谢谢。 - Jacob Birkett
等一下...不行。我刚刚在我的现有网站上尝试了这段代码...不起作用。只有一个白屏，我认为主题之间存在冲突。 :/ - Jacob Birkett
欢迎。既然我不确定你做了什么改变/添加来使它工作，那么我想你可以在下面回答自己的问题。 - OneCricketeer
显示剩余3条评论
4个回答
17
这是我早已经忘记的解决方案:
当时我忘记了这个问题，也没有得到答案，所以我创建了自己的解决方案作为Chris Jeffrey's marked.js的扩展。
我称之为tagdown.js。
这里是它的链接：http://spikespaz.com/tagdownjs/
万一该链接或者我的域名过期了：https://spikespaz.github.io/tagdownjs/
Github: https://github.com/spikespaz/tagdownjs
这允许将Markdown直接添加到网站中，在设置了类别markdown的标签内。在网站上查看示例。它没有主题系统，只有Markdown解析器。
更新
项目TagdownJS已从Github中删除。它的代码看起来非常简单，不值得拥有自己的仓库。
在它找到新家之前，只需找到Christopher Jeffery's 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.
- Jacob Birkett
3
https://github.com/zhlicen/md.htm zeromd.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
- zhlicen
1
2虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - Jmaurier
3
基本上，您需要将MD格式转换为HTML。 JavaScript是一种选择。
以下是一个示例（虽然是Windows，独立于操作系统）：
比如说，一个名为mytest的文件夹看起来像这样：
以下是一个示例（虽然是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>
这是与 IT技术 相关的内容：
<!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>
And the 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 ！
====
转换
您可以尝试替换模板，但某些效果可能无法呈现。例如，使用John Gabriele的快速markdown示例，公式显示不佳。
有人会建议使用代码段，但我没有成功让❄️工作，解析失败。
- LinconFive
3
'md-block.js' 对于基本的功能似乎是有效的。
然后将您的 MD 包裹在一个
这里是一个简单的示例：
<script type="module" src="https://md-block.verou.me/md-block.js"></script>
然后将您的 MD 包裹在一个
md-block 中这里是一个简单的示例：
<body>
<h1>Normal HTML Heading</h1>
<md-block>
# Markdown Heading
**Something in BOLD**
~~strikthrough~~
</md-block>
<script type="module" src="https://md-block.verou.me/md-block.js"></script>
</body>
- Ajay
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
- 相关问题
- 8 使用Pandoc在Markdown中嵌入缩进的HTML
- 34 如何在TypeScript中导入Markdown(.md)文件
- 29 如何在 HTML 文件中引用 Markdown (.md) 文件
- 6 在R Markdown中嵌入现有的HTML
- 23 鹈鹕: 如何在Markdown中嵌入HTML和JavaScript
- 10 将HTML转换为Markdown
- 53 在Jekyll HTML中嵌入Markdown
- 14 Eclipse Markdown 插件 - 如何在双击 .md 文件时打开 Markdown HTML 预览？
- 6 将原始HTML插入Markdown
- 3 将Markdown保存为交互式HTML