pan-xiaozhen-254933

Background

因為最近有需要用到方程式 & Table的function來更方便地做筆記&記錄資訊. 所以就研究可不可以在Blog上面增加這些function. 很幸運的是在網路上發現有蠻多相關的分享. 看來不只我有這種需求嗎(笑)

Markdown Table

首先是Markdown Table, 如果你平常有在使用Markdown的話基本上對這個功能應該都不陌生. 可惜的是Ghost上面似乎有支援html的table tag. 所以對Markdown的Table就不願意在支援了. Anyway, 剛好有人分享就把它記錄下來.

Step 1

# 到Ghost目錄
$ cd /var/www/ghost

Step 2

$ vim core/server/models/post.js

core/server/models/post.js

// # Post Model
var _              = require('lodash'),
    uuid           = require('node-uuid'),
    moment         = require('moment'),
    Promise        = require('bluebird'),
    sequence       = require('../utils/sequence'),
    errors         = require('../errors'),
    Showdown       = require('showdown-ghost'),
    
    # add 'table' in extensions:[]
    converter      = new Showdown.converter({extensions: ['ghostgfm', 'footnotes', 'highlight', 'table']}),
    
    ghostBookshelf = require('./base'),
    events         = require('../events'),
    config         = require('../config'),
    baseUtils      = require('./base/utils'),
    i18n           = require('../i18n'),
    Post,
    Posts;
...

Step 3

$ vim core/built/assets/ghost.min.js

core/built/assets/ghost.min.js 中 搜索ghostgfm,会找到extensions:[]並加入"table".

Step 4

複製node_modules/showdown-ghost/compressed/extensions/table.js文件内容. (忽略註解的部分)

$ cat node_modules/showdown-ghost/compressed/extensions/table.js

copied part

(function(){var a=function(a){var b={},c="text-align:left;",d;return b.th=function(a){if(a.trim()==="")return"";var b=a.trim().replace(/ /g,"_").toLowerCase();return'<th id="'+b+'" style="'+c+'">'+a+"</th>"},b.td=function(b){return'<td style="'+c+'">'+a.makeHtml(b)+"</td>"},b.ths=function(){var a="",c=0,d=[].slice.apply(arguments);for(c;c<d.length;c+=1)a+=b.th(d[c])+"\n";return a},b.tds=function(){var a="",c=0,d=[].slice.apply(arguments);for(c;c<d.length;c+=1)a+=b.td(d[c])+"\n";return a},b.thead=function(){var a,c=0,d=[].slice.apply(arguments);return a="<thead>\n",a+="<tr>\n",a+=b.ths.apply(this,d),a+="</tr>\n",a+="</thead>\n",a},b.tr=function(){var a,c=0,d=[].slice.apply(arguments);return a="<tr>\n",a+=b.tds.apply(this,d),a+="</tr>\n",a},d=function(a){var c=0,d=a.split("\n"),e=[],f,g,h,i=[];for(c;c<d.length;c+=1){f=d[c];if(f.trim().match(/^[|]{1}.*[|]{1}$/)){f=f.trim(),e.push("<table>"),g=f.substring(1,f.length-1).split("|"),e.push(b.thead.apply(this,g)),f=d[++c];if(!!f.trim().match(/^[|]{1}[-=| ]+[|]{1}$/)){f=d[++c],e.push("<tbody>");while(f.trim().match(/^[|]{1}.*[|]{1}$/))f=f.trim(),e.push(b.tr.apply(this,f.substring(1,f.length-1).split("|"))),f=d[++c];e.push("</tbody>"),e.push("</table>"),i.push(e.join("\n"));continue}f=d[--c]}i.push(f)}return i.join("\n")},[{type:"lang",filter:d}]};typeof window!="undefined"&&window.Showdown&&window.Showdown.extensions&&(window.Showdown.extensions.table=a),typeof module!="undefined"&&(module.exports=a)})();

把複製的部分加到core/built/assets/vendor.min.js的最後面.

Step 5

# restart ghost
$ forever restart index.js

Step 6

測試一下

國家 人口數
Taiwan 23 millions
Japan 600 millions

MathJax

加入 MathJax 的方法官方其實有一個版本. 但我試過之後好像沒有work. 所以結合了其他資訊在這邊做一下記錄.

1. Adding MathJax using Code Injection

1-1

Copy and paste the MathJax CDN script into the Blog Header section. This will load the latest version of MathJax with your blog.

<script type="text/javascript" async src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML">
MathJax.Hub.Config({
    tex2jax: {
        inlineMath: [["$", "$"], ["\\(", "\\)"]],
        processEscapes: true
    }
});
</script>

2. Restart Ghost

$ forever restart index.js

P.S update at 2017-07-20, if you use ghost cli you can try:

$ ghost restart

3. Test

Use $$...$$ or \[...\] to indicate "displayed mathematics". You can also enable MathJax to recognize $...$ for inline equations.

- Inline : $ y = \int_0^1 {1\over x} dx $
- Standalone: $$ y = \int_0^1 {1\over x} dx $$

會變成以下這樣.

  • Inline : $ y = \int_0^1 {1\over x} dx $
  • Standalone: $$ y = \int_0^1 {1\over x} dx $$

Reference