日期:2014-05-16  浏览次数:20329 次

使用node.js建博客(六) - 添加代码高亮的支持 (Final)

本片为《用node.js建博客》系列的最后一篇,如果你第一看到这个系列, 可以在文章结尾看到前几篇

技术准备

1. 如何添加代码高亮支持

代码美化选用Google-code 的 PrettyPrint。使用非常方便,能够自动匹配语言。

2. 使用CSS框架完成最基本的美化(本片将不涉及)

CSS框架打算用BluePrint,  如果只需要Grid, 选用960Grid也不错

?

思路

以前采用的是直接渲染markdown的方式。在Express中注册一个markdown渲染器,在response时将markdown渲染输出。这种方式的缺点就是不好对输出的html进行修改(比如添加js,css等).?

因此需要修改markdown的渲染方式,将markdown嵌入到jade模板中。

?

Let's do it:

1. 修改测试:

test/page-test.js

?

var vows = require('vows');
var apiEasy = require('api-easy');
var assert = require('assert');
var jsdom = require('jsdom').jsdom;


var suite = apiEasy.describe('blogs');

suite.discuss("when visit home page")
    .discuss('can view blog list and it should response 200 status')
    .use('localhost', 3000)
    .setHeader('Content-Type', 'text/html; charset=utf-8')
    .get()
        .expect(200)
        .expect("should respond with x-powered-by",
            function(err, res, body) {
                // express
                assert.include(res.headers, 'x-powered-by');
            })
        .expect("should respond with 'Nodeblog - Home' title",
            function (err, res, body) {
                var doc = jsdom(body);
                //匹配title
                assert.equal(doc.title, "NodeBlog - Home");
            })
            
    .export(module);

?

test/blogs-test.js

?

var vows = require('vows');
var apiEasy = require('api-easy');
var assert = require('assert');
var jsdom = require('jsdom').jsdom;

var suit = apiEasy.describe("/blogs/*.html")

suit.discuss('when vists the markdown blog,')
    .use('localhost', 3000)
        .setHeader('Content-Type', 'text/html; charset=utf-8')
        .path('/blogs/')
        
    .discuss('if the markdown file is exists, show blog')
        .get('monitor_doc')
            .expect(200)
            .expect("should respond 'NodeBlog - Blogs' title",
                function  (err, res, body) {
                    var doc = jsdom(body)
                    assert.equal(doc.title, 'NodeBlog - Blogs');
                })
    
    .undiscuss()    
    .discuss('if the markdown file is not exists')
       .get('unknow')
            .expect(404)
            .expect("should respond 'NodeBlog - 404' title",
                function  (err, res, body) {
                    var doc = jsdom(body)
                    assert.equal(doc.title, 'NodeBlog - 404')
                })
    
    .export(module);


2. 在views/blogs/下添加show.jade

该文件用于显示 markdown blog

?

views/blogs/show.jade:

div.blog_main
    !{blog_content}

?

? 此时需要用 !{} 不能使用 #{}, 否则jade会将"<",">"当特殊字符处理,将其转换成转移字符。

?

3. 修改app.js?

?

app.get('/blogs/:title', function(req, res, next) {
    
    var urlPath = [
        // 获取相对路径, 我的应该是: 
        // /Users/lvjian/projects/nodejs/n