Markdown转HTML之Node篇

原创 2017年06月06日 21:55:28

前言

之前用Python写过类似的工具,更能上来说一般般。而且实用性不是很强。http://blog.csdn.net/marksinoberg/article/details/51863506

然后好巧不巧又看到了一个Node上的相关模块,看起来渲染效果比我那个好多了。联想到hexo这款静态博客生成工具,就思量着也大致的做一下。

环境及编码

接下来简单的模拟一下相关的实现。代码比较凌乱,思维比较混乱,还望海涵(虽然主要是作为我自己的笔记,但如果对你有些许帮助,那就不枉我码了这么多字咯)。

搭建环境

所依赖的第三方模块有如下几个:

  • express: 开启本地服务, 预览生成效果。
  • Markdown-it: 渲染md文件为HTML内容。
  • rd: 一个读取文件夹内容的好帮手。
  • commander: 制作命令行工具的一大利器。

下面简要对这几个模块进行阐述,以及相关的使用技巧。

express

express不仅作为对connect的高层封装,更包含了一些额外的处理。所以我们可以方便的进行路由控制,这对于本次的工具而言,是个不错的选择。

// 初始化服务器
    var app = express();
    var router = express.Router();
    app.use('/assets', server_static(path.resolve(dir, 'assets')));
    app.use(router);

    // 渲染文章
    router.get('/posts/*', function(req, res, next){
        var name = stripExtname(req.params[0]);
        // 渲染req.params[0]对应的文章,然后展示给前台
        res.end(html);
        });

        // res.end(req.params[0]);
    });

    // 渲染列表
    router.get('/', function(req, res, next){
        // 读取源文件目录, 渲染出列表内容。
        res.end('list of articles.');
    });

    app.listen(8080);

markdown-it

相对于Python中的那些第三方库,我倒是觉得Node中与其也没甚么两样。使用起来同样很简单。

第一步,引入依赖

let markdowner = require('markdown-it');

第二步, 配置构造器

var md = new markdowner({
    html: true,
    prefix: 'code-',
});

第三步, 调用渲染方法,获取渲染后内容

var html = md.render(sourcedata||'');

如此,便是markdown-it的基础内容了,待会将在代码中更加详细的运用。

commander

用过Python的argparser的估计都知道,很方便的一个处理命令行参数的第三方库。不过Node中的commander用起来更方便。

下面简单的介绍一下使用流程。详细内容还是看人家的官网吧,如下:
https://www.npmjs.com/package/commander

第一步, 安装模块

npm install commander --save

第二步,编码

/**
 * 一个命令行工具库。
 */

let commander = require('commander');

// help 命令
commander.command('help')
         .description('显示工具如何使用的帮助信息')
         .action(function(){
             commander.outputHelp();
         });

// create 命令
commander.command('create [dirname]')
         .description('创建一个空的博客')
         .action(function(dirname){
            console.log(dirname+' 创建完成。')
         });

// preview 命令
commander.command('preview [dirname]')
         .description('预览获取到的Markdown文件夹内容')
         .action(function(dirname){
            console.log(' preview of %s', dirname);
         });
        //  .action(require('./cmd_preview'));

// build 命令
commander.command('build [dirname]')
         .description('根据给定的文件夹路径生成HTML内容.')
         .option('-o OR --output <dirname>', '导出生成的HTML存放的路径')
         .action(function(dirname){
            console.log('build based on %s', dirname);
         });
        // .action(require('./cmd_build'));

// 解析相关命令
commander.parse(process.argv);

第三步, 查看效果
**commander**运行效果

如果想更加方便一点,直接使用命令来操作。使用

npm link

当然了,还需要设置一下对应的package.json文件内容。这里不过多叙述了。

rd

我这里的需求是读取_posts文件夹下的Markdown源文件,所以只需要readFile方法即可。
具体代码如下:

rd.readFile(sourcedir, function(err, files){
        if(err){
            console.log('读取文件夹内容失败!');
            return;
        }
        // 遍历文件夹列表,对每一个文件执行渲染操作。
        files.forEach(function(file){
            // 做自己的逻辑处理即可。
        });
    });

这个模块比较简单,有兴趣的可以参考下面的作者链接。
https://github.com/leizongmin/node-rd

核心编码

下面正式开始今天的主题,做一个带预览功能的Markdown文件转HTML页面的工具。

cmd_preview模块

/**
 * 关于预览实现相关的代码。
 */

let express = require('express');
let path = require('path');
let markdowner = require('markdown-it');
let fs = require('fs');
let rd = require('rd');

var md = new markdowner({
    html: true,
    langPrefix: 'code-',
});




module.exports = function(dir) {
    dir = dir || '.';

    // 初始化服务器
    var app = express();
    var router = express.Router();
    app.use(router);

    // 渲染文章
    router.get('/posts/*', function(req, res, next){
        var name = stripExtname(req.params[0]);
        var file = path.resolve(dir, '_posts', name+'.md');
        console.log('---dir--', dir);
        console.log('---name--', name);
        console.log('---file--', file);

        fs.readFile(file, function(err, content){
            if(err){
                console.log('读取文件失败!');
                res.end(JSON.stringify(err)+"\n");
                return next(err);
            }
            res.writeHead(200, {"Content-Type": "text/html;charset=UTF-8"});
            var html = markdownTOHTML(content.toString());
            console.log('读取文件成功, 解析后的内容为:\n', html);
            res.end(html);
        });

        // res.end(req.params[0]);
    });

    // 渲染列表
    router.get('/', function(req, res, next){
        var sourcefolder = path.resolve(dir, '_posts');
        rd.readFile(sourcefolder, function(err, files){
            if(err){
                console.log('读取文件夹内文件失败!');
                return next(err);
            }
            res.writeHead(200, {"Content-Type": "text/html;charset=UTF-8"});
            var html = "<html><h1>Markdown 转 HTML 实时预览</h1><hr><br />";
            files.forEach(function(filepath){
                html += "<a href='/posts/"+ get_file_name(filepath) +".md' target='_blank'>"+get_file_name(filepath)+"</a><br /><br />";
            });
            html += "</html>";
            res.end(html);
        }); 


        // res.end('list of articles.');
    });

    app.listen(8080);
};


function stripExtname(name) {
    var i = 0-path.extname(name).length;
    if(i==0) i=name.length;
    return name.slice(0, i);
}

function get_file_name(fullname){
    var ls = fullname.toString().split('\\');
    var filename =  ls[ls.length-1].split('.');
    // console.log('ls--', ls);
    // console.log('filename--', filename);
    return filename[0];
}

function markdownTOHTML(content) {
    return md.render(content||'');
}

cmd_build模块

/**
 * 实现Markdown文件到HTML文件的转换。
 */

let markdowner = require('markdown-it');
let rd = require('rd');
let path = require('path');
let fs = require('fs');

var md = new markdowner({
    html: true,
    langPrefix: 'code-',
})


module.exports = function(dir) {
    dir = dir || '.';
    console.log('当前文件路径为:', dir);

    // 读取出给定目录下的所有的文件
    // 将所有Markdown文件依次转成HTML页面,并进行保存操作。
    get_files_by_dir(dir);
}

function get_files_by_dir(dir) {
    // 计算出源文件的路径
    var sourcedir = path.resolve(dir, '_posts');
    var publicdir = path.resolve(dir, 'public');
    rd.readFile(sourcedir, function(err, files){
        if(err){
            console.log('读取文件夹内容失败!');
            return;
        }
        // 遍历文件夹列表,对每一个文件执行渲染操作。
        files.forEach(function(file){
            var html = md2html(file);
            var filename = get_filename_by_path(file);
            var output = path.resolve(publicdir, filename+'.html');
            console.log('保存路径为:', output);
            save_html_content(html, output);
            console.log('%s.html 生成成功!', filename);
        });
    });
}

function md2html(filepath){
    var content = fs.readFileSync(filepath);
    var html = md.render(content.toString()||'');
    return "<html><head><meta charset='UTF-8'><title>"+get_filename_by_path(filepath)+"</title></head>"+html+"</html>";
}

function save_html_content(content, outpath){
    fs.writeFile(outpath, content, function(err){
        if(err){
            console.log('save_html_content: 保存文件内容失败!');
            return;
        }
        console.log('save_html_content: %s 保存成功!', outpath);
    });
}

function get_filename_by_path(filepath){
    var paths = filepath.toString().split('\\');
    return paths[paths.length-1].split('.')[0];
}

打造命令行工具

还是用刚才的hello.js,现在稍微修改一下action里面的内容,对应我们刚才做的那两个小模块,做下修改即可。完整代码如下:

/**
 * 一个命令行工具库。
 */

let commander = require('commander');

// help 命令
commander.command('help')
         .description('显示工具如何使用的帮助信息')
         .action(function(){
             commander.outputHelp();
         });

// create 命令
commander.command('create [dirname]')
         .description('创建一个空的博客')
         .action(function(dirname){
            console.log(dirname+' 创建完成。')
         });

// preview 命令
commander.command('preview [dirname]')
         .description('预览获取到的Markdown文件夹内容')
        //  .action(function(dirname){
        //     console.log(' preview of %s', dirname);
        //  });
         .action(require('./cmd_preview'));

// build 命令
commander.command('build [dirname]')
         .description('根据给定的文件夹路径生成HTML内容.')
         .option('-o OR --output <dirname>', '导出生成的HTML存放的路径')
        //  .action(function(dirname){
        //     console.log('build based on %s', dirname);
        //  });
        .action(require('./cmd_build'));

// 解析相关命令
commander.parse(process.argv);

写点xx.md

巧妇难为无米之炊, 现在先在hello.js的同级目录下建个文件夹_posts,里面写点xx.md文件,然后建一个public文件夹保存生成的HTML文件。比如我的目录结构是这样的。

E:\Code\Nodejs\learn\libs-learn\commander-related>tree /f .
卷 文档 的文件夹 PATH 列表
卷序列号为 0000-4823
E:\CODE\NODEJS\LEARN\LIBS-LEARN\COMMANDER-RELATED
│  cmd_build.js
│  cmd_preview.js
│  hello.js
│
├─public
│
└─_posts
        helloworld.md
        second.md

演示

首先是预览实现,在命令行里输入以下命令:

node hello.js preview . # .代表当前目录

结果如下:
**preview**效果图


然后是针对每一篇文章生成效果的演示。

每一篇文章的预览效果


最后就是看下build功能的实现。

现在在命令行里面输入以下命令:

node hello.js build . # .代表当前目录

然后看下效果。
**build** 功能实现


总结

大致来说功能就算是完成了,但是目前这样子是没法直接应用的。很多东西都需要润色,比如:

  • 模板化HTML页面处理。
  • 命令行选项的link实现。
  • 通过监测文件内容变化实现实时预览

就先到这里吧,今天又发现了两个不错的网址,然后还是先去学一波,补充补充知识吧。很多时候,不是能力不够,而是见识不足

版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载时请标注http://blog.csdn.net/marksinoberg. 举报

相关文章推荐

如何将表格转成MarkDown或HTML格式

相信喜欢使用MarkDown的胖友们一定遇到过这样的情况:在某网站看到一个很不错的总结表格,想要引用一下,但是复制下来发现MarkDown并不支持,自己画出来又太浪费时间,是不是很头疼?今天发现一个办...

利用Nodejs+Express将Markdown转换为HTML(附源码)

MarkdownToHtmlMarkdownToHtml 说明 Demo源码下载 准备工作 安装marked 关键步骤 docjs docejs appjs Demo演示 将Markdown文档转...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

基于nodejs的一个实时markdown转html工具小程序

1.版本一 - 1.1`npm install marked --save` 安装markdwon转html的包. - 1.2 使用watchFile监视 markdown文件 const fs ...

markdown转HTML(使用editor.md)

点击下载案例代码editor.md网站地址http://pandao.github.io/editor.md/前面有写过一篇markdown转html,使用Markdown.Converter进行转换...

Markdown语法转为html语法

问题描述:lz将前台的Markdown代码传到后台,发现传过来的是Markdown格式的字符串,lz向将其转化为html格式的字符串保存到数据库中。 解决办法:使用pegdown将markdown格式...

Linux下批量将md文件批量转换为html文件

要将markdown文件转换成html文件,可以用discount或python-markdown软件包提供的markdown: 以下主要介绍在Ubuntu系统下的转化: # Debian/Ubu...

MD文件批量转换为html文件

无语了,居然有人盗CSDN的帐号!!!往事不提,进入正文。 参考了博客http://blog.csdn.net/makenothing/article/details/8450975的内容,做了些改...
  • jdnie
  • jdnie
  • 2016-11-04 11:34
  • 1619

使用Pandoc命令将Markdown格式文件转换为HTML格式文件

一、Pandoc命令介绍 Pandoc是一个强大的格式语言转换工具,被称为该领域的“瑞士军刀”。比如可用Pandoc命令将Markdown格式文件转换成Html格式文件。 二、具体转换命令 ...
  • DSLZTX
  • DSLZTX
  • 2016-05-06 21:17
  • 1948

Markdown pad导出html 带目录

在工具-选项-高级-html head编辑器中加入如下代码 方式一 document.addEventListener("DOMContentLoaded", function() { ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)