GFMS + Marked を改良して、Qiita っぽいものを作る

動機

自分、Markdown が好きです。ちょっと前までは Google Docs などでメモを取っていたのですが

• オンラインでないといけない
• Vim が使えない（Vim も大好きです）
• 汎用性がない（データを取り出しにくい）

などとちょっと不便に感じていたのでメモも Markdown で取るようになってきました。

なので、Markdown で技術的なコンテンツを書いて気軽に公開できる Qiita も好きです。

ただ、パッとローカルで好きなエディタで書いてすぐに検証できる方法がほしいなぁ〜と思い、 探しまわってたら、

GitHub Flavored Markdown Server (GFMS)

ってのを見つけました。ローカルの Markdown ファイルを Marked + node.js でブラウザ上で簡単に見られるようにするツールです。

自分のほしいものに近かったのですが、そのままだと

1. カレントディレクトリからしか起動できない
2. 言語名の後にコロン ( : ) が付いていると動かない
3. emoji が使えない

と、ちょっと使いづらい・足りない部分があったので、自分で改良していって見ようと思いました。

カレントディレクトリからしか起動できない

GFMS を起動する際に起動したときにいるディレクトリを Web サーバのルートとして動くので、起動時にいちいちそのディレクトリに移動しないといけないのが面倒です。
これは結構簡単なんでないかな、と思い、ちょっと変更してみました。

抜けてた文末のセミコロンを入れるコミットも一緒にしてしまったので、diff が美しくないですが、大事なのはこの部分です。

-d/--directory コマンドライン引数を付ける。

+ .alias('d', 'directory')
+ .describe('h', 'Directory to use as root.')
+ .default('d', process.cwd())

プロセスのカレントディレクトリを取るのではなく、引数から取ってくる。

+ var rootDir = argv.d;

- var dir = decodeURI(process.cwd() + base);
+ var dir = decodeURI(rootDir + base);

言語名の後にコロン ( : ) が付いていると動かない

Qiita の Markdown ではコードの言語をしている後に javascript:main.js のように ファイル名を指定することができます。
ただ、この記法 GitHub の Markdown にはないので Marked もここでエラーしちゃいます。
ということで、ファイル名をいきなり出すのはちょっと面倒そうだったので、Marked に手を入れて、とりあえずエラーしないようにだけしてみました。

- fences: /^ *(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n+|$)/,
+ fences: /^ *(`{3,}|~{3,}) *([^\s:]+)?[ :]*\n([\s\S]+?)\s*\1 *(?:\n+|$)/,

まあ、シンプルに : を読んで無視するようにしただけですが、これで Qiita 向けに書いている内容も処理できるようになりました。

emoji が使えない

これ重要ですね

いや、真面目は話、こういう小さいものでも感情が出ており、雰囲気とかを出すのにすごくいいと思うのですよ（LINE のスタンプしかり）。

ただこれはさすがに誰かやってるだろうと思って調べた所、ありました。

Bartvds/marked

emoji 対応のコミット

残念ながら、この commit、オリジナルの Marked にはマージされていないので、仕方なく自分の Fork にこの commit を持ってきました。

この commit は残念ながら emoji の表記 (コロンで囲まれている文字）があったらどうするか、という部分は自分で書かないといけないです。
ということで、とりあえず Qiita の emoji 用 URL に置き換えるようにしてみました
（Qiitaさん、もしマズければ変更しますので、連絡ください。）

GitHub Diff

+ emoji: function (emoji) {
+ var imageUrl = "https://cdn.qiita.com/emoji/" + encodeURIComponent(emoji) + ".png";
+ return '<img src="' + imageUrl + '" alt="' + emoji + '" width="20" height="20"></img>';
+ },

ということで Push してみた

• diskshima/marked
• diskshima/gfms

GFMS の依存関係（package.json）に diskshima/marked を記載してあるので、下だけ clone すれば使えます。

今後

もっと使いやすくするのに以下もやってみたいなーって考えてます。

• Qiita みたいにコードブロックの左上にファイル名を表示する。
• Live Reload（ファイルが更新されたら自動的にブラウザのページもリロード）
• CommonMark 対応（と言っても、Qiita が対応したらですが）
• README.md に説明を付ける。