読者です 読者をやめる 読者になる 読者になる

Crowiでもプラグインを使いたかったんです

サマリ

Crowiでオレオレjavascriptを実行できるようにした。

github.com

背景

CrowiはMarkdownでかけるwikiで、見た目もおしゃれで大変いい感じなんだけど、 pluginが使えないのがちょっと残念だったので作った。

予防線

  • 自分のJavascript知能指数は2くらいしかないので、ゴリラが文字を書くようなコードになっていてつらい
  • あんまりテストしていないのでバグってる可能性が多々ある
  • 本家crowiとは全く関係ない

使い方

  • public/js以下にpluginフォルダを作って、pluginのjsファイルを放り込む
  • 以下のようにmarkdownを書くと、plugin_name.jsをロードして、同名の関数にデータを入れたjsonを引数にしてコールしてくれる。
  • pluginはmarked(https://github.com/chjj/marked)をちょこっといじって実装しているので、返り値は必ずHTMLにすること。
  • 1ページにつき1つのプラグインしかサポートしていない
  • 複数使いたい欲張りはもっとちゃんとしたやつを作って僕にも使わせてください
 ```#plugin_name
 {json形式(改行なし)でデータを入れる}
 ```

どんなことができるの?

こんな感じで、markdownだけどフォームを入れ込んだりできる。要は調整さんとかdoodleとかの 出欠確認フォームみたいなのを作れるというわけですね。

f:id:nbisco:20160706231635p:plain

プラグインサンプルよこせ

くらえ!これがJavascript知能指数2のコードだ!!!

gist.github.com

どういう仕組みで実現しているの?

プラグインコール

markedのRenderer(markdownからhtmlに変換するところ)をoverrideして使っています。 ```# を見つけたらpluginだと判断して、#に続く文字列をevalして プラグインをコール。

参考URL

Tumbling Dice — [JavaScript]marked.jsを無理矢理拡張してオレオレパーサーを作る

プラグインロード

lib/route/page.jsで、記事の中から```#<plugin_name>を抜き出します。 renderVarsに、pluginというプロパティを定義し、<plugin_name>.jsを覚えさせておきます。 そして、lib/views/layout/layout.htmlで、pluginプロパティが定義されているときにscriptタグを追加するようにします。

なんでplugin1個だけサポートなのかというと、 Promise内にループを仕掛けるのが結構大変そうだったから。