nodejs将md文件转为html文件

503 阅读2分钟

作为一名程序员;难免要写markdown文档; 但是写出来的md文档如果发给没装markdown阅读器的同事来看的话;就看起来太难受了; 于是就简单写了点脚本;一键将md文件转为html;

使用方法

使用方法很简单;只需下载代码包,将需要转换的md文件放在md文件夹下面;然后用nodejs执行md2html.js文件 就会在output文件夹下;看到转好的html

看转换后的效果

bcq2kT.png

核心代码

这里主要使用的是npm install marked使用marked将md格式的文件转为html的文件,但转换后的html文件是没有样式的,
然后就需要用的node的vm模块;将写好的样式文件和编译后的html文件重新组合成新的带有样式的html文件
这里提供了两个样式文件,放在html-component文件夹下;可可通过修改md2html方法的theme参数引入不同的css文件,以下代码有注释

/**
 * 将当前目录下的md文件夹里的md文件;编译成html文件并输出到.vuepress/public/html文件夹下面
 */
const path = require('path')
const fs = require('fs')
const vm = require('vm')
const {marked} = require('marked')
// 获取文件夹下所有文件
function getFileList(path) {
    const filesList = [];
    readFile(path, filesList);
    return filesList;
}

// 遍历读取文件
function readFile(path, filesList) {
    const files = fs.readdirSync(path); // 需要用到同步读取
    files.forEach(walk);

    function walk(file) {
        const states = fs.statSync(path + '/' + file);
        if (states.isDirectory()) {
            readFile(path + '/' + file, filesList);
        } else {
            // 创建一个对象保存信息
            const obj = {};
            obj.size = states.size; // 文件大小,以字节为单位
            obj.name = file; // 文件名
            obj.path = path + '/' + file; // 文件绝对路径
            filesList.push(obj);
        }
    }
}
/**
 * 模板引擎方法
 * 使用node的vm 模块
 */
const  templateCompile = (template, data) => {
    const vm = require('vm')
    return vm.runInNewContext(`\`${template}\``, data)
}
/**
 * 将inputPath文件夹的md文件转为HTML文件输出到outputPath文件夹下
 * @param theme :markdown文件的主题
 * @param inputPath : md文件的文件夹
 * @param outputPath: 输出的HTML的文件夹
 */
const md2html = ({theme, inputPath, outputPath}) => {
    const themeStr =  fs.readFileSync(`./html-component/${theme}.css`, 'utf-8')
    const fileList = getFileList(inputPath)
    for (let i = 0; i < fileList.length; i++) {
        const item = fileList[i]
        const templateHtml = fs.readFileSync('./html-component/index.html')
        const htmlName = item.name.replace('.md','')
        const contextData = {
            title: htmlName,
            mdHtml: marked(fs.readFileSync(item.path, 'utf-8')),
            css: themeStr
        }
        const compiledHtml = templateCompile(templateHtml, contextData)
        fs.writeFileSync(`${outputPath}/${htmlName}.html`, compiledHtml)
    }
}

md2html({
    // theme1 和 theme2 对应html-component文件夹下的theme1.css和theme2.css
    theme: 'theme1',
    inputPath: path.resolve(__dirname, './md'),
    outputPath: path.resolve(__dirname, './output')
})


下载代码

pan.baidu.com/s/19Ki3H2Dv…