让Ghost的markdown支持表格(table)语法显示

Ghost目前版本中(V0.5.3)的markdown语法不支持表格解析,需要使用html标签才能解析显示,但是ghost用到的markdown语法解析组件showdown是有支持table语法的相应扩展的,只不过ghost里面没有使用。下面先来看看showdown怎么使用扩展组件:

在客户端使用扩展

<script src="src/showdown.js" />  
<script src="src/extensions/twitter.js" />

var converter = new Showdown.converter({ extensions: 'twitter' });  

在服务端使用扩展

// Using a bundled extension
var Showdown = require('showdown');  
var converter = new Showdown.converter({ extensions: ['twitter'] });

// Using a custom extension
var mine = require('./custom-extensions/mine');  
var converter = new Showdown.converter({ extensions: ['twitter', mine] });  

ok,先找到ghost服务端的使用showdown的地方,在/ghost/core/server/models/post.js :

// # Post Model
var _              = require('lodash'),  
    uuid           = require('node-uuid'),
    Promise        = require('bluebird'),
    errors         = require('../errors'),
    Showdown       = require('showdown'),
    ghostgfm       = require('../../shared/lib/showdown/extensions/ghostgfm'),
    converter      = new Showdown.converter({extensions: [ghostgfm]}),//在这里修改增加‘table’
    ghostBookshelf = require('./base'),
    xmlrpc         = require('../xmlrpc'),
    Post,
    Posts;

改后:

// # Post Model
var _              = require('lodash'),  
    uuid           = require('node-uuid'),
    Promise        = require('bluebird'),
    errors         = require('../errors'),
    Showdown       = require('showdown'),
    ghostgfm       = require('../../shared/lib/showdown/extensions/ghostgfm'),
    converter      = new Showdown.converter({extensions: [‘table’,ghostgfm]}),
    ghostBookshelf = require('./base'),
    xmlrpc         = require('../xmlrpc'),
    Post,
    Posts;

接下来修改客户端代码,客户端代码用于在ghost后台编辑的时候预览效果。找到/ghost/core/built/scripts/ghost.min.js,在文件中找到以下代码:

showdown = new Showdown.converter({extensions: ['ghostimagepreview', 'ghostgfm']});  

修改为:

showdown = new Showdown.converter({extensions: ['table','ghostimagepreview', 'ghostgfm']});  

再找到/ghost/core/built/scripts/vendor.min.js,在这个文件的最后把showdown的table扩展代码的压缩版全部追加上去(当然table.js中前面注释说明的部分除外),showdown的table扩展压缩文件在/ghost/node_modules/showdown/compressed/extensions/table.js这里可以找到。

把上面修改的几个文件上传到对应的目录,使用production环境启动ghost,就可以到ghost后台试试看markdown的table语法解释了。

后台编辑器输入:

| Tables | Are | Cool |
| ------------- |---------------| ------|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |

效果: | Tables | Are | Cool | | ------------- |---------------| ------| | col 3 is | right-aligned | $1600 | | col 2 is | centered | $12 | | zebra stripes | are neat | $1 |

当然,实际ghost开发当中不会直接去修改/ghost/core/built/scripts/里面的文件,这里面的文件都是通过Grunt命令生成的,但这要到Github上下载开发版源码来修改并编译才行,这里说的是ghostchina上的0.5.3中文版

终于码完,欢迎转载,乐意的话可以注明出处,不乐意就让他随风而去吧^^.

Wilson

张弛有度、简约不简单