您的位置：首页 > Web前端 > Node.js

[原创]使用 NodeJS, MarkdownJS, PrettifyJS 打造个人博客写作平台 - 打包下载

2011-03-17 22:54 771 查看

引言

上一篇文章我们介绍了使用 NodeJS, MarkdownJS, PrettifyJS 打造个人博客写作平台的整体思路，也顺利解决了把 PrettifyJS 转换为 NodeJS 模块的麻烦。这篇文章我们会分析 NodeJS 相关代码，并给出可运行的压缩包下载。

在继续本文之前，先来回答上篇评论中网友的疑问，这么做的好处有哪些？如果我们有 Showdown 这样的在线转换 Markdown 语法的工具，这篇文章的意义在哪里？

首先我希望使用记事本写文章，这样方便快捷。然后本机能够直接生成 HTML，这样我既可以直接放在我的个人主页，也可以粘贴到博客中。

其次技术文章中，需要粘贴很多源代码，有 CSS, HTML, JavaScript 或者 Asp.NET, C# 的源代码，我希望这些源代码能自动着色，这样文章看起来更生动。由于 Markdown 语法不支持为

<pre>

标签设置

class

属性，所以只能使用 Google 的 PrettifyJS，但是一般博客提供商是不会让你引入外部 JavaScript 的，但大部分可以修改 CSS，这就需要在转换过程中直接生成着色后的 HTML，而这是 Showdown 不可能支持的。

实现

首先来看看发布的压缩包的目录结构：

root
lib
nodejs
node.exe
markdown
markdown.js
prettify-nodejs.js
build.js （所以的代码都在这里）
template.html （使用 prettify 在浏览器解析的页面模板）
template-prettify-inline.html （不包含 prettify JavaScript 文件的页面模板）
nodejs_markdownjs
intro.md （我们写的文章）
build.bat （执行这个文件会把当前目录下的所有 .md 文件转化为 .html 文件）

我们来看下 build.js 的内容：

var fs = require('fs'),
markdown = require("./markdown"),
path = require('path'),
prettify = require('./prettify-nodejs');

// 可以传递第三个参数，如果为true则使用prettify的内联方式，不用加载JS
// 比如：..\lib\nodejs\node ../lib/markdown/build.js true
var prettifyInline = false;
if(process.argv.length >= 3) {
prettifyInline = process.argv[2] === 'true' ? true : false;
}

// 当前目录下的所有文件
var files = fs.readdirSync('./'),
i = 0, count = files.length,
file, dotLastIndex, fileName, fileType;

// 对所有以 .md 为后缀的文件，进行转换
for(; i < count; i++) {
file = files[i];
dotLastIndex = file.lastIndexOf('.');
if(dotLastIndex >= 0) {
fileType = file.substr(dotLastIndex + 1);
if(fileType === 'md') {
fileName = file.substr(0, dotLastIndex);
buildFile(file, fileName);
}
}
}

// 获取模板文件内容
function getTemplate() {
var markdownPath = path.dirname(process.argv[1]);
if(prettifyInline) {
markdownPath = markdownPath + '/template-prettify-inline.html';
} else {
markdownPath = markdownPath + '/template.html';
}
return fs.readFileSync(markdownPath, 'utf8');
}

// 转换 markdown 文件为html文件
function buildFile(file, fileName){
console.log('Build file: ' + file);
var fileContent, h1Regex, title = '';
fileContent = fs.readFileSync(file, 'utf8');
fileContent = markdown.toHTML(fileContent);

// 从 html 中提取 h1 标签内的内容，作为网页的标题
h1Regex = /<h1>([\w\W]*?)<\/h1>/.exec(fileContent);
if(h1Regex && h1Regex.length === 2) {
title = h1Regex[1];
}

// 转化为 prettify 需要的格式
fileContent = fileContent.replace(/<pre><code>([\w\W]*?)<\/code><\/pre>/g, function(str, p1) {
if(prettifyInline) {
// prettify 对单引号的处理有问题，这是权宜之策
p1 = p1.replace(/'/g, "'");
// 如果是内联的 prettify，需要预先生成代码的 html 格式
p1 = prettify.prettyPrintOne(p1);
}
return '<pre class="prettyprint">' + p1 + '</pre>';
});

// 替换模板内容
fileContent = getTemplate().replace('${title}', title).replace('${body}', fileContent);

fs.writeFileSync(fileName + '.html', fileContent);
}

console.log('Done!');

如果你用过 nodejs，上面的代码很好理解了，大致分为如下几个步骤：

读取 build.bat 同级目录下的所有以 .md 为后缀的文件。

对每个 .md 文件，调用 MarkdownJS 模块，转化为 HTML 源代码。

提取 HTML 源代码中的

<h1>

标签作为页面的标题；对所有的

<pre><code>...</code></pre>

调用 PrettifyJS 模块，直接生成着色后的 HTML 代码。

保存生成的 HTML 文件。

使用方法

下载 Markdown 写作平台，解压缩到任意文件夹，然后和 lib 同级目录创建一个文件夹 HelloWorld，里面新建两个文件：

build.bat

..\lib\nodejs\node ../lib/markdown/build.js true

intro.md

## 段落一

下面是出自 [MDC Developer Center][1] 的一段 JavaScript 代码：

s_obj = new String(s_prim = s_also_prim = "foo");
s_obj.length;       // 3
s_prim.length;      // 3
s_also_prim.length; // 3
'foo'.length;       // 3
"foo".length;       // 3

[1]: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String[/code] 运行 build.bat，会在当前目录下生成 intro.html 文件，打开：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.markdown-post h1
{
font-weight: bold;
font-size: 2.2em;
margin: 25px 0px 15px;
}
.markdown-post h2
{
font-size: 2em;
font-weight: bold;
margin: 25px 0 15px;
}
.markdown-post h3
{
font-weight: bold;
font-size: 1.2em;
margin: 10px 0px 5px;
}
...
</style>
</head>
<body>
<div class="markdown-post">
<h2>段落一</h2>

<p>下面是出自 <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">MDC Developer Center</a> 的一段 JavaScript 代码：</p>

<pre class="prettyprint">
<span class="pln">s_obj </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span>
...
</pre>
</div>
</body>
</html>

需要注意的是：这个生成的 HTML 文件不包含任何 JavaScript 文件，但是代码都已经被着色了，实际的效果如下：



如何把生成的 HTML 添加为博客园随笔
首先我们需要在博客园的后台管理中，进入“设置”标签，添加自定义的 CSS（这个 CSS 也就是生成的 intro.html 头部的CSS）：



在添加随笔时，打开 HTML 视图，把生成 HTML 的 <body>
 部分的全部内容拷贝进去就可以了：



如果你想看具体的示例，这篇文章和上篇文章就是最好的范例了。

下载可运行包
下载可运行包

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航