markdown2

使用Github Pages搭建轻博客[4]
使用Markdown书写博客并生成页面

第2节中介绍了使用jade作为模板引擎生成html页面文件。

回顾一下generate.js的代码:

var jade = require('jade');
var fs = require('fs');

var fn = jade.compileFile('index.jade', { 'pretty': true });

var html = fn({ 'content': '<span>hello</span>' });

fs.writeFileSync('index.html', html);

content的html片段可以是从文件中读取。

但是用html直接来写博客,内容的排版很不方便。

Markdown

Markdown是一种轻量级的标记语言,简练的语法用来写作博客、排版很方便。

marked可以帮助我们将markdown翻译为html。

安装marked:

npm install marked --save

使用也很简单:

var marked = require('marked');
console.log(marked('I am using __markdown__.'));
// Outputs: <p>I am using <strong>markdown</strong>.</p>

因此,之前的generate.js可以修改为如下:

var jade = require('jade');
var fs = require('fs');
var marked = require('marked');

var fn = jade.compileFile('index.jade', { 'pretty': true });

var content = fs.readFile('blog.md');

var html = fn({ 'content': marked(content) });

fs.writeFileSync('index.html', html);

其中blog.md文件里面是使用markdown写作好的博客文章。 使用marked转换为html片段后,再使用jade模板生成完整的html页面。


使用Github Pages搭建轻博客[5]

为你博客中的代码片段着色。

Markdown中本身支持代码片段的语法,生成的html用<code>标签包围。 但是代码颜色没有高亮显示。

highlight.js

要实现代码高亮可以使用highlight.js

安装highlight.js:

npm install highlight.js --save

使用highlight.js:

var fs = require('fs');
var markdown = require('marked');
var hljs = require('highlight.js');

markdown.setOptions({
    highlight: function (code, lang) {
        return hljs.highlight(lang, code).value;
    }
});

var content = fs.readFile('blog.md');
var html = markdown(content);

代码高亮后的html在浏览的时候发现并没有被着色,但是发现代码里的关键字都被设置了样式。 所以定义好样式的颜色就能看到着色后的代码了。

highlight.js官方也提供了一些样式表,可以到这里选取一个来使用。