`
witcheryne
  • 浏览: 1099041 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

    博客分类:
  • node
阅读更多

本片为《用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/nodeblog
        process.cwd(),
        '/views/blogs/',
        req.params.title, '.md'
    ].join('');
    
    var filePath = path.normalize(urlPath)
    
    path.exists(filePath, function  (exists) {
        
        if(!exists) {
            console.log('jump 404');
            next();
        } else {
            var content = fs.readFileSync(filePath, config.encoding);
            // 这里将markdown转成html, 然后以参数形式输出
            var html_content = markdown.parse(content);
            
            res.render('blogs/show', {
                title: config.app + " - Blogs"
                , blog_content: html_content
            });
        }
    });

})

 

此时启动app, 访问博客可看到效果. 

 

4. 为show.jade添加prettyprint支持:

下载prettyprint, 将其放到 ./public/lib/ 文件夹下:

 

 

在show.jade文件中使用:

 

link(rel='stylesheet', href='/libs/prettify/sunburst.css', type="text/css")
script(type='text/javascript', src='/libs/prettify/prettify.js')
script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js')
style(type="text/css")
    h1 {
        text-align: center;
    }

div.blog_main
    !{blog_content}
    
script
    // markdown-js会用<code><pre></pre></code>将代码包起来
    // 不过无法为其添加prettyprint class属性
    // 这里采用jquery手动添加
    $('code, pre').addClass('prettyprint');
    prettyPrint();

 

看一下效果:


 

What' next?  Final了还有next...???

为什么Final?

边写博客边coding有点太慢了,打算先将博客建好,之后以技术应用为主题写文章。

 

接下来要做什么:

  1. 采用mongodb保存markdown数据,node.js中mongoose模块提供了对mongodb的支持
  2. 添加用户认证(当然为了保证暂时只能我自己用)
  3. 设计REST-ful接口,并且创建node commandline工具,让我可以用Textmate/MacVim直接写博客。

 

  • 大小: 23 KB
  • 大小: 66.5 KB
0
2
分享到:
评论
2 楼 yiqianke 2013-01-04  
config是什么?
1 楼 baryon 2012-02-15  
谢谢, 文章写得很棒,很受启发.

其实, 可以仍然用引擎渲染md的办法, 而不用输出html的办法
只需要准备一个layout, express会自动将md转化好的结果输出到body上的

你可以试一下
    res.render(path, {layout: 'layout_doc'});


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Doc</title>
        <link href="/google-code-prettify/prettify.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="/google-code-prettify/prettify.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
			$(document).ready(function() {
				$('pre code').addClass('prettyprint');
				prettyPrint();
			});

        </script>
    </head>
    <body>
        <div id="body">
            <div id="content">
                <%- body %>
            </div>
        </div>
    </body>
</html>


另外, md转换以后的代码是什么意思呢? 去掉了html中的什么?

	      return html.replace(/\{([^}]+)\}/g, function(_, name){
	    	  console.log(name, locals[name]);
	        return locals[name];
	      });


这样做的后果就是如果md文档里面有代码会输出错误的内容
直接 return html; 好了.



相关推荐

    Node.js(node-v16.15.1-linux-x64.tar.xz)

    Node.js 内部使用 Google V8 JavaScript 引擎来执行代码;大部分基本模块都是用 JavaScript 编写的。Node.js 包含一个用于文件、套接字和 HTTP 通信的内置异步 I/O 库。HTTP 和套接字支持允许 Node.js 充当 Web ...

    Node.js(node-v16.15.1-win-x86.zip)

    Node.js 内部使用 Google V8 JavaScript 引擎来执行代码;大部分基本模块都是用 JavaScript 编写的。Node.js 包含一个用于文件、套接字和 HTTP 通信的内置异步 I/O 库。HTTP 和套接字支持允许 Node.js 充当 Web ...

    Node.js(node-v16.15.1-linux-armv7l.tar.xz)

    Node.js 内部使用 Google V8 JavaScript 引擎来执行代码;大部分基本模块都是用 JavaScript 编写的。Node.js 包含一个用于文件、套接字和 HTTP 通信的内置异步 I/O 库。HTTP 和套接字支持允许 Node.js 充当 Web ...

    Node.js(node-v16.15.1-win-x64.zip)

    Node.js 内部使用 Google V8 JavaScript 引擎来执行代码;大部分基本模块都是用 JavaScript 编写的。Node.js 包含一个用于文件、套接字和 HTTP 通信的内置异步 I/O 库。HTTP 和套接字支持允许 Node.js 充当 Web ...

    Node.js(node-v16.15.1-linux-arm64.tar.xz)

    Node.js 内部使用 Google V8 JavaScript 引擎来执行代码;大部分基本模块都是用 JavaScript 编写的。Node.js 包含一个用于文件、套接字和 HTTP 通信的内置异步 I/O 库。HTTP 和套接字支持允许 Node.js 充当 Web ...

    Node.js(node-v16.15.1-x64.msi)

    Node.js 内部使用 Google V8 JavaScript 引擎来执行代码;大部分基本模块都是用 JavaScript 编写的。Node.js 包含一个用于文件、套接字和 HTTP 通信的内置异步 I/O 库。HTTP 和套接字支持允许 Node.js 充当 Web ...

    node-v12.16.1-x64 -win64.zip

    安装过程中,系统会自动配置环境变量,使得用户在命令行中可以直接使用`node`和`npm`这两个命令,从而方便地执行JavaScript代码和管理项目依赖。 在Node.js v12.16.1中,值得注意的是它对V8引擎的升级,这不仅提升...

    node-v16.20.0-darwin-x64.tar.gz

    Node.js 是一个强大的开源开发平台,它允许开发者使用 JavaScript 编程语言进行服务器端编程,打破了 JavaScript 仅限于浏览器的局限。这个标题 "node-v16.20.0-darwin-x64.tar.gz" 提供了关于 Node.js 版本和操作...

    node-v18.16.0-win-x64

    Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于Chrome V8引擎的JavaScript运行环境,使用了一个事件驱动、非阻塞式I/O模型, [1] 让JavaScript 运行在服务端的开发平台,它让JavaScript成为与PHP、Python、...

    node-v16.17.0-win-x64

    Node.js是一个开源、跨平台的JavaScript运行环境,它允许开发者在服务器端执行JavaScript代码,极大地扩展了JavaScript的应用范围,不再局限于浏览器前端。 Node.js的核心特性包括事件驱动的非阻塞I/O模型,这使得...

    Node.js(node-v16.15.1-x86.msi)

    Node.js 内部使用 Google V8 JavaScript 引擎来执行代码;大部分基本模块都是用 JavaScript 编写的。Node.js 包含一个用于文件、套接字和 HTTP 通信的内置异步 I/O 库。HTTP 和套接字支持允许 Node.js 充当 Web ...

    node-v12.18.3-x64_nodejs_Node.js_

    3. **V8引擎**:Node.js使用谷歌的V8 JavaScript引擎,它能快速地编译和执行JavaScript代码,提供了高性能的优势。 4. **模块化**:Node.js拥有强大的模块系统,使用`npm`(Node Package Manager)来管理和分享代码...

    node-v18.2.0-win-x64.zip

    Node.js 是一个强大的开源开发平台,它允许开发者使用 JavaScript 编程语言在服务器端执行代码。这个“node-v18.2.0-win-x64.zip”文件是 Node.js 的一个特定版本,针对Windows 64位操作系统。在这个版本中,用户...

    node-v14.15.1-win-x64

    Node.js 使用 V8 引擎,这是一种由 Google 开发的高性能 JavaScript 和 WebAssembly 引擎,它的存在使得 Node.js 能够快速执行代码。Node.js 的核心特性包括非阻塞 I/O 模型和事件驱动,这些设计使得它在处理高并发...

    Node.js(node-v16.15.1.tar.gz 源码)

    Node.js 内部使用 Google V8 JavaScript 引擎来执行代码;大部分基本模块都是用 JavaScript 编写的。Node.js 包含一个用于文件、套接字和 HTTP 通信的内置异步 I/O 库。HTTP 和套接字支持允许 Node.js 充当 Web ...

    Node.js-tmpin-添加stdin支持至任何CLI应用程序接受文件输入

    标题中的“Node.js-tmpin-添加stdin支持至任何CLI应用程序接受文件输入”指的是一个名为“tmpin”的Node.js模块,它的主要功能是为命令行界面(CLI)应用程序添加标准输入(stdin)的支持,以便这些应用程序能够接收...

    nodejs(node-v16.13.2-x64.msi)-(node-v18.12.1-x64.msi)

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它让开发者能够在服务器端使用 JavaScript 进行编程,极大地扩展了 JavaScript 的应用范围。Node.js 的设计思想是事件驱动、非阻塞I/O模型,这使得它在...

    node-v16.20.0-darwin-arm64.tar.gz

    "javascript"标签明确了Node.js是基于JavaScript的,这是一种广泛使用的编程语言,具有丰富的库和框架支持。"软件/插件"标签暗示Node.js本身是一个软件,同时也常用于开发其他软件和插件。 在"node-v16.20.0-darwin...

    node.js官方v14.17.3-x64版本msi安装包【集成npm】

    6. 开始使用:现在你可以开始使用 Node.js 运行 JavaScript 代码,或使用 npm 安装和管理所需的依赖包。例如,使用 `npm install &lt;package&gt;` 命令安装特定的模块。 Node.js v14.17.3 版本的重要特性包括性能优化、...

    node.js 在linux 64位系统上的可执行程序 node-v21.0.0-linux-x64.tar.gz

    9. **开发环境**: Node.js 可以搭配诸如 VS Code、WebStorm 等 IDE 或代码编辑器使用,这些工具提供了丰富的插件和特性,以支持 Node.js 开发,包括代码提示、自动格式化、调试等。 10. **应用示例**: 使用 Node.js...

Global site tag (gtag.js) - Google Analytics