原文地址:
http://www.520608.com/rang-ghostde-markdownzhi-chi-biao-ge-tableyu-fa-xian-shi-2/
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中文版。
终于码完,欢迎转载,乐意的话可以注明出处,不乐意就让他随风而去吧^^.