在前端开发过程中，常常需要撰写技术文档以及 README 等文件，并将其转化为美观易读的 HTML 文件。为此，我们可以使用 markdown-mume-renderer npm 包来快速将 Markdown 格式的文本转换为 HTML 文件。
markdown-mume-renderer 介绍
mume 是一款用于将 Markdown 文件转换为 HTML、PDF、EPUB 等格式的 npm 包。而 markdown-mume-renderer 则是基于 mume 的一个简化版本，专注于将 Markdown 文件转换为 HTML 文件。
优点：
- 支持绝大部分 Markdown 语义；
- 支持 LaTeX 公式；
- 自动生成目录；
- 支持使用 CSS 样式美化 HTML 文件。
缺点：
- 不支持 yaml front matter。
安装
npm install markdown-mume-renderer
使用
const fs = require('fs'); const path = require('path'); const MarkdownMumeRenderer = require('markdown-mume-renderer');
const markdownText = fs.readFileSync(path.resolve(__dirname, './README.md'), { encoding: 'utf-8', });
const mdRenderer = new MarkdownMumeRenderer({ htmlTemplate: path.resolve(__dirname, './template.html'), });
mdRenderer.render(markdownText).then((html) => { // 输出到文件 fs.writeFileSync(path.resolve(__dirname, './output.html'), html, { encoding: 'utf-8', }); });
在上面的代码中，我们首先使用 fs 和 path 模块读取 Markdown 文件的内容。然后创建一个 MarkdownMumeRenderer 的实例，用于将 Markdown 文本转化为 HTML 文件。其中，htmlTemplate 参数指定了生成的 HTML 文件使用的模板。
接着，我们调用 render 方法，将 Markdown 文本传入，该方法会返回一个 Promise 对象，表示 HTML 生成的过程。最后，我们在 Promise 对象的回调函数中，将生成的 HTML 文本写入到文件中。
HTML 模板
我们可以通过指定 htmlTemplate 参数，使用自定义 HTML 模板来美化生成的 HTML 文件。下面是一个示例模板文件：
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- --------------- --
------------------------
-------
---- -
---------- -----
-
--- --- ---- ---
--------
-------
------
------------------
-----------
-------
-------其中，{{title}} 表示文章标题，{{content}} 表示转换生成的 HTML 内容。
小结
通过使用 markdown-mume-renderer，我们可以快速将 Markdown 文件转换为美观易读的 HTML 文件。同时，我们还可以使用自定义的 HTML 模板来美化生成的 HTML 文件。在实际的开发中，我们可以将该 npm 包的使用集成到构建工具中，实现自动化的 Markdown 转换。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f0d81e8991b448dca49