likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 30

实现思路:

  • 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>
`;