您的位置：首页 > Web前端 > Node.js

node.js实现markdowm转换成HTML

2018-01-24 17:02 429 查看

使用到的第三方包介绍

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));
});
})

});
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航