在express中使用markdown
之前在github的博客中已经使用过markdown
语法。markdown
语法简单,适合技术文章和说明文档。这次项目中的文档希望使用markdown
来写,把文档放在express之中。记录一下使用过程。
安装依赖
markdown
语法需要解析,需要使用markdown
模块,安装模块。
npm install markdown --save
在app.js
中引用
var markdown = require('markdown').markdown;
简单粗暴的使用方式
一开始的时候,我使用了一种简单粗暴的方式。不是提倡的方式,但是思考的过程值得记录。
我把express默认的jade
模版引擎更换为markdown
模版引擎。
在app.js
中修改。
var fs = require('fs');
// 设置markdown模版引擎
app.engine('md', function(path, options, fn) {
fs.readFile(path, 'utf8', function(err, str) {
if (err) return fn(err);
str = markdown.toHTML(str);
fn(null, str);
});
});
// 使用
app.set('view engine', 'md');
// 更换了模版的路径,这个路径就是放markdown文件的地方
app.set('views', path.join(__dirname, 'doc/'));
// 增加一个路由
app.get('/doc', function(req, res) {
res.render('index');
});
这里的路由使用了index
模版,就是在doc
文件夹中,新增的index.md
文件。index.md
文件里面就直接用markdown
语法写文档的内容。
# 平台文档
## 功能
xxxxxxx
现在,访问/doc
已经可以显示出来markdown
的文档的,但是现在的效果并不如人意。样式很简陋,几乎就像个纯文本一样。因为确实没有设置css啊,但是现在的做法是直接读取markdown
文件,并不能增加对css的支持。显然这并不合理。
更合理的方式
更合理的方式不应该直接用markdown
文件作为视图的模版文件。应该还是用jade
作为模版文件,只是在其中增加对markdown
的支持。
再次修改app.js
// 还原为jade作为模版引擎
app.set('view engine', 'jade');
// 在渲染的操作前,读取markdown文件,把内容转为html
app.get('/doc', function(req, res) {
fs.readFile('doc/index.md', 'utf8', function(err, data) {
var html = markdown.toHTML(data);
res.render('doc', {mdContent: html});
});
});
增加jade
文件
// layout.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/public/doc/github-markdown.css')
body
block content
// doc.jade
extends layout
block content
.markdown-body
!= mdContent
为了增加样式,添加了github-markdown.css
文件,网上有很多配合markdown
的样式,根据喜好选择即可。
终于显示出来的文档有模有样了!