Node.js应用——markdown文件转html

实现思路：

• 01 读取 md 和 css 内容
• 02 将上述读取出来的内容替换占位符，生成一个最终需要展的 Html 字符串
• 03 将上述的 Html 字符写入到指定的 Html 文件中
• 04 监听 md 文档内容的变经，然后更新 html 内容
• 05 使用 browser-sync 来实时显示 Html 内容

需要用到两个依赖包

{
  "name": "04-md",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "browser-sync": "^2.27.9",
    "marked": "^4.0.14"
  }
}

实现代码

const fs = require("fs");
const path = require("path");
const { marked } = require("marked");
const browserSync = require("browser-sync");

let mdPath = path.join(__dirname, process.argv[2]);
let cssPath = path.resolve("github.css"); // 初始化样式
let htmlPath = mdPath.replace(path.extname(mdPath), ".html");
console.log(mdPath, cssPath, htmlPath);

// 监听
fs.watchFile(mdPath, (cur, pre) => {
  if (cur.mtime !== pre.mtime) {
    fs.readFile(mdPath, "utf-8", (err, data) => {
        // 将 md-->html
        let htmlStr = marked(data);
        fs.readFile(cssPath, "utf-8", (err, data) => {
          let retHtml = temp
            .replace("{{content}}", htmlStr)
            .replace("{{style}}", data);
          //   将上述内容写入到指定的html文件中，用于在浏览器中展示
          fs.writeFile(htmlPath, retHtml, (err) => {
            console.log("html create successful");
          });
        });
      });
  }
});

browserSync.init({
  browser: "",
  server: __dirname,
  watch: true,
  index: path.basename(htmlPath),
});

// html模板
const temp = ` 
    
    
    
        
        
        
    
    
        

            {{content}}
        
    
    
`;