如何在 html 文件中包含 markdown (.md) 文件答案

【问题标题】：How to include markdown (.md) files inside html files如何在 html 文件中包含 markdown (.md) 文件
【发布时间】：2016-10-12 17:49:30
【问题描述】：

假设我在 github 存储库中有一个 README.md 文件。然后，我将创建一个有关此存储库的网站，我将使用gh-pages 托管该存储库。

我想要的是我的index.html 文件的一部分，它从我的README.md 文件中获取其内容。这样，只需要更新一个文件。

我想markdown文件首先需要转换为html，然后可以将html放入另一个html文件中。

我已经查看了HTML5 Imports，但它们目前仅在 Chrome 中受支持。使用带有 document.write() 的单独 .js 文件可能很有用，但有没有简单、干净的方法？

【问题讨论】：

你可以使用 XMLHttpRequest 和 innerHTML 函数，或者如果你使用 jQuery，你可以使用 load 函数。 stackoverflow.com/questions/17636528/…
我会在本地运行 jekyll ......这也是 gh-pages 的最终用途。但是通过在本地运行，您可以包含插件等，这些插件可以满足您的需求......
@mb21 您应该按照您的建议使用 jekyll 提交详细的答案。 @gliemezis 下面发布的详细 Node.js 解决方案看起来不错。它使用marked NPM 包。
这里有一个使用jekyll的解决方案：stackoverflow.com/questions/15214762/…
总有Pandoc

标签： javascript html markdown

【解决方案1】：

我正在使用 zero-md> 网络组件。

<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>

<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>

<!-- Simply set the `src` attribute to your MD file and win -->
<zero-md src="README.md"></zero-md>

【讨论】：

这应该是公认的答案 - 如此优雅和简单
一个离题的问题 - 如何在 HTML 文件中包含主题以格式化降价？
@amzon-ex 在 HTML 中的中使用 CSS

【解决方案2】：

我使用 Node.js 的完整答案

1.首先安装marked降价转换器：

$ npm install --save-dev marked

2.然后在一个名为generateReadMe.js 的新文件中，将markdown 编译为HTML 并将其写入一个新的README.html 文件：

var marked = require('marked');
var fs = require('fs');

var readMe = fs.readFileSync('README.md', 'utf-8');
var markdownReadMe = marked(readMe);

fs.writeFileSync('./site/README.html', markdownReadMe);

3.然后在需要README.md 内容的index.html 中，添加<object> 标签：

<object data="README.html" type="text/html"></object>

4.然后在命令行上运行它来实现它：

$ node path/to/generateReadMe.js

整个过程非常简单且无痛。我将整个内容添加到我的npm start 脚本中。现在，每当我对我的 README.md 文件进行更改时，这些更改都会在我的 gh-pages 网站上注册。

【讨论】：

我发现了这个marked 转换的几个问题，包括但不限于使所有内部链接无用。与将以下锚点添加到标头标签<a id="user-content-header-title" class="anchor" href="#header-title" aria-hidden="true"> 的Git Markdown 方法不同，此转换仅将id 添加到标头<h3 id="header-name">。这对我来说真的很麻烦。我敢肯定，我不是唯一一个用这种方法评估情况的人。我建议看看here。
我明白了。此解决方案的步骤 1、2 和 4 可以替换为使用 ruby 和 GitHub 标记或任何其他工具将.md 文件转换为 HTML 的适当更改。第 3 步是回答这个特定问题的重要部分。
不使用npm怎么办？
@moctarjallo 如上所述，您可以用您想要的任何其他工具/语言替换此答案的步骤 1、2 和 4。主要只是需要一些东西将markdown转换为html，然后你可以用同样的方式使用<object>标签。

【解决方案3】：

您可以使用诸如 https://github.com/markdown-it/markdown-it 之类的降价解析器将降价转换为 html。

您可以在服务器上转换 markdown 并将其合并到交付给客户端的 HTML 中，或者使用它在浏览器中加载 markdown 并在那里转换。

【讨论】：

我认为这是另一个 Node.js 解决方案（通过 NPM 包管理器）。接受的答案更好，因为它有详细的步骤。

【解决方案4】：

要将 Markdown 转换为 html，可以使用转换库或命令工具。有关使用 Ruby 语言的示例，请访问：https://github.com/github/markup。

通过访问：https://www.npmjs.com/search?q=markup，尝试为您的实现搜索合适的转换库或命令工具。上面接受的答案是使用 Node.js 的 NPM 包管理器的示例。

【讨论】：

另一个选项是 jekyll：stackoverflow.com/questions/15214762/….