node.js实现markdowm转换成HTML

最新推荐文章于 2025-05-19 12:09:09 发布

原创最新推荐文章于 2025-05-19 12:09:09 发布 · 置顶 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

16 篇文章

订阅专栏

前端自动化

3 篇文章

订阅专栏

本文介绍了如何使用Node.js结合marked库将Markdown转换为HTML，并利用browser-sync实现实时刷新功能。通过监听Markdown文件变化，读取内容转换后插入HTML模板，同时加载CSS样式。最终启动服务器，在文件更新时自动刷新浏览器展示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用到的第三方包介绍

marked包 https://www.npmjs.com/package/marked
功能是将markdown文本内容转换成HTML代码
例如：

var marked = require('marked');
console.log(marked('I am using __markdown__.'));
// Outputs: <p>I am using <strong>markdown</strong>.</p>

browser-sync包 http://www.browsersync.cn/
功能是将根目录自动启动服务器，监听服务器中指定文件，当文件内容发生改变时，自动刷新浏览器；
例如：

// 引用 browser-Sync 模块
var browserSync = require("browser-sync");

// 将./app这个目录启动为服务器
browserSync({server: "./app"});

// 调用reload方法，刷新./app下文件core.css,注意传入的是文件名，不是路径
browserSync.reload("core.css");

当在命令行运行入口js文件时，自动启动服务器，监听3000端口
这里写图片描述

使用到的重要内置核心API

fs.watchFile(path, (curr, prev) => {
// curr和prev都是path文件的stats
根据判断文件这两种状态的最近一次修改时间curr.mtime和prev.mtime是否相等，判断文件是否发生改变
}) http://nodejs.cn/api/fs.html#fs_fs_watchfile_filename_options_listener

实现思路：

监听markdown文件是否发生变化
如果发生变化，读取md文件，并调用marked函数，将内容转换成HTMLconent
设计HTML模版，模版预留{{{style}}}和{{{content}}}
并将CSS文件读取写入模版，替换{{{style}}}
将HTMLconent替换{{{content}}}
启动browser-Sync服务器，进行浏览器自动刷新

具体代码

//Mrakdown文件自动转换
const fs = require('fs');
const path = require('path');
const util = require('util');
const marked = require('marked');
const browserSync = require("browser-sync");


var template = `<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>MD转HTML</title>
    <style>{{{style}}}</style>
</head>
<body>
  <div class="vs">
    {{{content}}}
  </div>
</body>
</html>`;
//接受需要转换的文件路径
const target = path.join(__dirname, process.argv[2] || '../README.md');

// 启动浏览器自动刷新服务器
browserSync({server: path.dirname(target)});

//监视文件变化
fs.watchFile(target, (curr, prev) => {
    console.log(`current file's stats: ${curr.size},previous file's stats: ${prev.size}, `);
    // 判断文件到底有没有变化
    if (curr.mtime === prev.mtime) {
        return false;
    }
    // 读取md文件转换成HTML
    fs.readFile(target, 'utf8',(error, content) => {
        if (error){
            throw error;
        }
        var html = marked(content);
        fs.readFile(path.join(__dirname, './github.css'), (error, css) => {
            html = template.replace('{{{content}}}', html).replace('{{{style}}}', css);
            // 将拼接好的HMTL文件保存在当前md文件目录里
            var filename = target.replace('.md', '.html');
            fs.writeFile(filename, html, 'utf8', () => {
                console.log('completed');
                browserSync.reload(path.basename(filename));
            });
        })

    });
});