作为一名程序员;难免要写markdown文档;
但是写出来的md文档如果发给没装markdown阅读器的同事来看的话;就看起来太难受了;
于是就简单写了点脚本;一键将md文件转为html;
使用方法
使用方法很简单;只需下载代码包,将需要转换的md文件放在md文件夹下面;然后用nodejs执行md2html.js文件
就会在output文件夹下;看到转好的html
看转换后的效果
核心代码
这里主要使用的是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')
})
下载代码
https://pan.baidu.com/s/19Ki3H2DvyI7yrQqn1PzG7w?pwd=8888 提取码:8888