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

Question

假设我在 github 存储库中有一个 README.md 文件。然后我正在制作一个关于我将使用 gh-pages.

托管的存储库的网站

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

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

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

Answer 1

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

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

Answer 2

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

尝试为您的实施搜索合适的转换库或命令工具，方法是访问：https://www.npmjs.com/search?q=markup。上面接受的答案是使用 Node.js.

的 NPM 包管理器的示例

Answer 3

我的完整答案使用 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 网站上注册。

Answer 4

我正在使用 <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 个文件中包含 markdown (.md) 文件

How to include markdown (.md) files inside html files

javascript

html

markdown