Nodejs实现markdown文件转html页面

最新推荐文章于 2025-10-24 12:48:49 发布

原创最新推荐文章于 2025-10-24 12:48:49 发布 · 4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#Nodejs #markdown #html

nodejs 同时被 2 个专栏收录

44 篇文章

订阅专栏

markdown

1 篇文章

订阅专栏

实现步骤

通过fs文件模块watchFile事件监听md文件的修改
通过fs文件模块readFile方法读取md文件内容
把md文件内容通过marked模块转为html内容
创建html页面骨架
把转换好的html内容填充到页面骨架
通过request模块请求外部github-markdown.css文件
把css内容填充到html页面骨架里的style里
通过fs文件模块writeFile方法写入全部内容并创建html文件

源代码


/**
 * markdown文件转html页面
 * @constructor
 */
class Md2Html {
    constructor(fileName) {
        this.fs = require('fs'); //文件模块
        this.path = require('path'); //路径模块
        this.marked = require('marked'); //md转html模块
        this.request = require('request'); //http请求模块
        this.fileName = fileName || 'unnamed';
        this.target = this.path.join(__dirname) + '/' + this.fileName + '.md';
        this.watchFile();
    }

    /**
    * 检测文件改动
    */
    watchFile() {
        this.fs.watchFile(this.target, {
            persistent: true, //是否持续监听
            interval: 200, //刷新间隔
        }, (curr, prev) => {

            if (curr.mtime == prev.mtime) { //比较修改时间，判断保存后内容是否真的发生了变化
                return false;
            }

            this.fs.readFile(this.target, 'utf-8', (err, data) => { //读取文件

                if (err) {
                    throw err;
                }

                const html = this.marked(data); //将md内容转为html内容
                let template = this.createTemplate();
                template = template.replace('{{{content}}}', html); //替换html内容占位标记


                this.createMarkdownCss(css => {
                    template = template.replace('{{{style}}}', css); //替换css内容占位标记
                    this.createFile(template);

                });
            });
        });
    }


    /**
     * 创建页面模板
     * @returns {string} 页面骨架字符串
     */

    createTemplate() {
        const template = `<!DOCTYPE html>
        <html>
            <head>
            <meta charset="utf-8" >
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>md文件转html页面</title>
            <style>
                .markdown-body {
                    box-sizing: border-box;
                    min-width: 200px;
                    max-width: 980px;
                    margin: 0 auto;
                    padding: 45px;
                }
                @media (max-width: 767px) {
                    .markdown-body {
                        padding: 15px;
                    }
                }
                {{{style}}}
            </style>
            </head>
            <body>
                <article class="markdown-body">
                    {{{content}}}
                </article>  
            </body>
        </html>`;
        return template;
    }

    /**
     * 读取css内容
     * @param {function} fn 回调函数
     */
    createMarkdownCss(fn) {
        var url = 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css';
        this.request(url, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                console.log(body);
                fn && fn(body);
            }
        });
    }


    /**
     * 创建html文件
     * @param {string} content 写入html的文件内容
     */
    createFile(content) {
        const name = this.fileName; //文件名
        const suffix = 'html'; //文件格式
        const fullName = name + '.' + suffix;  //文件全名
        const file = this.path.join(__dirname, fullName); //文件地址

        this.fs.writeFile(file, content, 'utf-8', err => {
            if (err) {
                throw err;
            }
            console.log('写入成功！');
        });
    }

}

new Md2Html('README');