Ghost での Markdown表記方法（テーブル表現）について。

Question

###前提・実現したいこと
ghost blog の中でmarkdown表記ができるのですが
どうやら、markdownでテーブルを表現することができないようなのです。（有名な話？）

###発生している問題・エラーメッセージ

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

テーブル表記ができないのです。

http://multix.jp/addon-markdown-table/

上記URLを参考にしてみたのですがいまいち内容が理解できていないせいか、テーブル表記が再現できません。
お手数おかけしてすみませんが、テーブル表記させる方法をご存知の方いらっしゃいましたら教えて頂けないでしょうか？

上記サイトの下記2つのスクリプトをどのように呼び出したらいいのかわからず、困っております。

jquery.ex-mark-table.js

//
// jquery.ex-mark-table.js
//
// $Id: mark-table.js 143 2015-05-08 09:31:06Z askn $
//
(function ($) {
    $.fn.markTable = function (config) {
        var defaults = {
            className: 'mark-table'
        }
        var options = $.extend(defaults, config);
        return this.each( function (i) {
            var title = $(this).attr("title");
            var $exported = $("<table/>");
            var $body = $("<tbody/>");
            var table = [], align = [], header = [];
            var imported = $(this).html().split(/([^\n]*\n)/);
            while (imported.length) {
                var line = imported.shift();
                if (line) {
                    if (line.length == 0) continue;
                    var column = line.match(/([^\|]*\|)/g);
                    if (column && column.length > 0) {
                        column.shift();
                        table.push($.map(column, function (val, index) {
                            return val.replace(/\|$/, "");
                        }));
                    }
                }
            }
            if (title != undefined) {
                $("<caption/>").text(title).appendTo($exported);
            }
            if (table.length && table[0].length && !table[0][0].match(/(^\:-|-\:$)/)) {
                header = table.shift();
            }
            if (table.length && table[0].length && table[0][0].match(/(^\:-|-\:$)/)) {
                align = $.map(table.shift(), function (val, index) {
                    if (val.match(/^\:\-*\:$/)) {
                        return "center";
                    }
                    else if (val.match(/^\-*\:$/)) {
                        return "right";
                    }
                    else {
                        return "left";
                    }
                });
            }
            if (header.length) {
                var $head = $("<tr/>");
                $.each(header, function (key, val) {
                    var $column = $("<th/>").html(val);
                    if (align[key]) {
                        $column.addClass(align[key]);
                    }
                    $head.append($column);
                });
                $("<thead/>").append($head).appendTo($exported);
            }
            if (table.length) {
                while (table.length) {
                    var $line = $("<tr/>");
                    $.each(table.shift(), function (key, val) {
                        var $column = $("<td/>").html(val);
                        if (align[key]) {
                            $column.addClass(align[key]);
                        }
                        $line.append($column);
                    });
                    $line.appendTo($body);
                }
                $body.appendTo($exported);
            }
            $(this).replaceWith($("<div/>").addClass(options.className).append($exported));
        });
    };
})(jQuery);
 
// End of Script

index.js

(function pageInit () {
    $('code[class^="language-"]').each(function () {
        var $this = $(this);
        var attr = $this.attr('class').replace(/^language-?/, '');
        var match = attr.match(/title:(.*)/);
        if (match) {
            $this.parent().attr('title', match[1]);
            attr = attr.replace(/title:.*/, '');
        }
        if (attr != null && attr.match(/^table/)) {
            // マークダウンテーブル
            $this.parent().html($this.html()).markTable();
        }
    });
})();

Answer 1

結論から言えば、ghost/content/themes/casper/default.hbsにjqueryの<script>要素があるので、その下に、新しく、script要素を２つ追記すれば動作します。これは自己責任のコード改変になります。

まず、ghostの記事中は以下のような状態で保存されていなければなりません。

この状態で記事を投稿すると、フロントには下記のようなHTMLが生成されます。

jquery.ex-mark-table.jsで行うのは、この生成されたcode要素の改変です。
ghost/content/themes/casper/default.hbsに、下記<script>を２つ挿入します。

<script>
//
// jquery.ex-mark-table.js
//
// $Id: mark-table.js 143 2015-05-08 09:31:06Z askn $
//
(function ($) {
    $.fn.markTable = function (config) {
        var defaults = {
            className: 'mark-table'
        }
        var options = $.extend(defaults, config);
        return this.each( function (i) {
            var title = $(this).attr("title");
            var $exported = $("<table/>");
            var $body = $("<tbody/>");
            var table = [], align = [], header = [];
            var imported = $(this).html().split(/([^\n]*\n)/);
            while (imported.length) {
                var line = imported.shift();
                if (line) {
                    if (line.length == 0) continue;
                    var column = line.match(/([^\|]*\|)/g);
                    if (column && column.length > 0) {
                        column.shift();
                        table.push($.map(column, function (val, index) {
                            return val.replace(/\|$/, "");
                        }));
                    }
                }
            }
            if (title != undefined) {
                $("<caption/>").text(title).appendTo($exported);
            }
            if (table.length && table[0].length && !table[0][0].match(/(^\:-|-\:$)/)) {
                header = table.shift();
            }
            if (table.length && table[0].length && table[0][0].match(/(^\:-|-\:$)/)) {
                align = $.map(table.shift(), function (val, index) {
                    if (val.match(/^\:\-*\:$/)) {
                        return "center";
                    }
                    else if (val.match(/^\-*\:$/)) {
                        return "right";
                    }
                    else {
                        return "left";
                    }
                });
            }
            if (header.length) {
                var $head = $("<tr/>");
                $.each(header, function (key, val) {
                    var $column = $("<th/>").html(val);
                    if (align[key]) {
                        $column.addClass(align[key]);
                    }
                    $head.append($column);
                });
                $("<thead/>").append($head).appendTo($exported);
            }
            if (table.length) {
                while (table.length) {
                    var $line = $("<tr/>");
                    $.each(table.shift(), function (key, val) {
                        var $column = $("<td/>").html(val);
                        if (align[key]) {
                            $column.addClass(align[key]);
                        }
                        $line.append($column);
                    });
                    $line.appendTo($body);
                }
                $body.appendTo($exported);
            }
            $(this).replaceWith($("<div/>").addClass(options.className).append($exported));
        });
    };
})(jQuery);
 
// End of Script
</script>
<script>
 // 呼び出しサンプル
$(function() {
    $('code[class^="language-"]').each(function () {
        var $this = $(this);
        var attr = $this.attr('class').replace(/^language-?/, '');
        var match = attr.match(/title:(.*)/);
        if (match) {
            $this.parent().attr('title', match[1]);
            attr = attr.replace(/title:.*/, '');
        }
        if (attr != null && attr.match(/^table/)) {
            // マークダウンテーブル
            $this.parent().html($this.html()).markTable();
        }
    });
});
</script>

競合を避けるためにも、挿入位置は<script>の最後、46行目あたりが好ましいです。
ghostを再起動してください。適用されない場合、htmlのキャッシュが残っているので、npm i express-hbsなどでキャッシュを削除してください。

記事本文では、code要素が先ほど見せたとおり生成されていますので、jqueryで正しく処理できたことが確認できます。

code要素が生成されない、ドメイン直下で正しく動作しないことに注意してください。

Comments

[EzrealTrueshot]

とても丁寧で、非常にわかりやすい説明誠にありがとうございます！

ただ・・・
https://twitter.com/EzrealTrueshot/status/659553599219896320

このように表示されてしまいまして、horse_n_deer様のように表示されません。
この他に何か特別ことをしなければいけないのでしょうか？

[horse_n_deer]

僕はデフォルトのスタイルで確認して、スクリーンショットの結果になったので、恐らくですが、後から追加したプラグインやcssなどが影響しているのではないでしょうか？

https://teratail.com/uploads/contributed_images/741ce38f2d2481ab10cb002351a73978.png

GoogleChromeであれば、生成された要素を右クリックして、「要素の検証」を行うと、jsによって変更された要素や、現在適用されているcssが確認できます。
適用されたcssが原因であれば、スクリーンショット画面右下、Stylesタブ内で、ファイルの場所、コードの行数が確認できます。
これを修正するには、強い指定（css 詳細度で検索してください）でcssを上書きするか、影響しているcssを削除する。など方法があります。

jsが原因であれば特定は難しいです。ghostをもう一つ作成して、何が原因でデザインが崩れ始めたのか検証する必要があります。

[horse_n_deer]

-

[EzrealTrueshot]

ありがとうございます！
やってみます。