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

Question

假设我README.md在github存储库中有一个文件.然后,我正在建立一个关于我将使用的这个存储库的网站gh-pages.

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

我想首先需要将markdown文件转换为html,然后将该html放入另一个html文件中.

我查看了HTML5 Imports,但目前只支持Chrome.使用单独的.js文件document.write()可能很有用,但有一种简单,干净的方式吗？

Answer 1

我正在使用 < zero-md > Web 组件。

<!-- 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>

Answer 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.然后里面的index.html其中README.md内容被通缉,添加一个<object>标签:

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

4.然后在命令行上运行它以实现它:

$ node path/to/generateReadMe.js

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

Answer 3

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

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