关于node.js:Nodejs应用markdown文件转html

7次阅读

共计 1376 个字符，预计需要花费 4 分钟才能阅读完成。

实现思路：

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 = ` 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .markdown-body {
                box-sizing: border-box;
                min-width: 200px;
                max-width: 1000px;
                margin: 0 auto;
                padding: 45px;
            }
            @media (max-width: 750px) {
                .markdown-body {padding: 15px;}
            }
            {{style}}
        </style>
    </head>
    <body>
        <div class="markdown-body">
            {{content}}
        </div>
    </body>
    </html>
`;

正文完