第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是一种轻量级的标记语言,简练的语法用来写作博客、排版很方便。
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页面。
为你博客中的代码片段着色。
Markdown中本身支持代码片段的语法,生成的html用<code>标签包围。
但是代码颜色没有高亮显示。
要实现代码高亮可以使用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官方也提供了一些样式表,可以到这里选取一个来使用。