使用Node实现一个md文档自动转换html

时间 2019-11-05

标签使用 node 实现一个文档自动转换 html 栏目 HTML 繁體版

原文原文链接

目标javascript

利用node实现一个实时的将md文档转换为html文件并在浏览器展现效果css
实现思路html

有了目标，剩下的就是思考一下怎么实现，总体思路以下java
- 怎么在node中，将md文档转成html文档？社区有不少优秀的库实现，本次选择marked
- 怎么实时的将md文章转换成html文件呢？熟悉node的小伙伴应该能想到 fs.watchFile 这个API
- 怎么实现实时的在浏览器中预览转换生成的html呢？利用一个比较久远的库browser-sync实现

代码实现

引入须要使用的API和库

const fs = require('fs');
const path = require('path');
const marked = require('marked');
const browserSync = require('browser-sync');
复制代码

定义路径node

由于须要将md转成html，须要定义目标路径(md)和生产路径(html)git

// 接受须要转换的文件路径
const target = path.join(__dirname, process.argv[2] || './test.md');
// 转换为html后保存的位置
let filename = target.replace(path.extname(target), '.html');
// 获取html的文件名, browserSync 使用
let indexPath = path.basename(filename);
复制代码

监听文件github

fs.watchFile 接受三个参数npm
1. Filename: 须要被 watch 的文件
2. Options: 选项配置，其中interval属性，指示轮询目标的频率
3. listener：有两个参数，当前的 stat 对象和以前的 stat 对象

// 监视文件的变化
fs.watchFile(target, { interval: 200 }, (curr, prev) => {
  // ...
});
复制代码

监听文件作了哪些事情api

利用 lisrener 判断文件是否变换，如果变化则继续

// 根据时间 判断文件是否变化
if (curr.mtime === prev.mtime) {
	return false;
}
复制代码

读取md文件，转换成新的html
1. 首先须要读取md文件
2. 利用 marked 将md转换成 html
3. 使用GitHub的md文档样式文件本次使用的, 并将其读取
4. 定义一个模板，用于接收读取的md和css内容
5. 读取完md和css文件，将读取的内容替换致模板中

// 读取文件 转换为新的html
fs.readFile(target, 'utf8', (err, data) => {
    if (err) {
        return throw err;
    }

    let html = marked(data);

    fs.readFile(path.join(__dirname, 'github.css'), 'utf8', (err, css) => {
        if (err) {
        return throw err
        }
        html = templates
        .replace('{{{content}}}', html)
        .replace('{{{styles}}}', css);
        fs.writeFile(
        target.replace(path.extname(target), '.html'),
        html,
        'utf8',
        err => {
            browserSync.reload(indexPath);
        }
        );
    });
});
复制代码

定义的html模板

let templates = `<!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"> <title>Document</title> <style>{{{styles}}}</style> </head> <body> <div class="wy">{{{content}}}</div> </body> </html>`;
复制代码

总结

实现这个效果，简单使用两个简单的API、库即可以实现完成代码浏览器