Markdownの入力を補助するプラグイン作った

リポジトリ

デモ

概要

Qiitaの投稿画面でリスト記法で入力をすると、改行するときに自動で*とか-とかが自動で挿入される「あれ」に、思いついた機能をゴタゴタとつけていったもの。
つい先日まではjQueryプラグインだったのだけれど、ここ数日のjQueryディス祭りにビビったので、jQueryに依存しないように作り変えたという話も。

なぜ作ったの

某情報共有サービスに、Qiitaの投稿画面にあるような「リストの入力補間」を実装したのだけれど、http://esa.io というサービスがテーブル記法の補間を実装したというのを知った私は、これにいたく感動しついつい同じものを実装してしまったという。
その後、誰得俺俺機能をゴタゴタとつけていって今に至る。

機能一覧

リスト記法の補完

Markdownのリストは*、-、+、1.などを入力して表現するのだけれど、- - -で線を引くという記法もあるので、これを考慮しないと- - -を入力して改行するとリストが挿入されるというバグが発生したりする。
リスト入力中や、複数の行を選択中にTabを押すと、4文字スペースでインデントする。もちろんShift + Tabだとインデントが戻る。

コードブロックの補完

```

↑を入力して改行すると対応する```が自動で挿入される。

```ruby
  puts 'fooooooooo'
```

↑この３行目で改行を入力したときには```が自動で挿入されてほしくない。それを実現するために「現在コードブロックの中にいるかどうか」を判定しなければいけなくて辛かった。今も完璧ではない。

テーブル入力

上に書いた通り、http://esa.io の方式をベースに。改行をすると次の行が挿入される。もちろんTabやShift+Tabでセルの移動もできる。
Markdownのテーブルはパイプ|で区切るのだけど、パイプ自体を入力できるようにバックスラッシュでパイプがエスケープ出来るようになっている。このエスケープされたパイプを考慮しないとダメなので、辛いかった。

チェックボックスの切り替え

これもesa.ioのチェックボックスをトグル より！

3x3からテーブル生成

ちょっと該当のtweetが見つからないのだけれど、たしかQiitaの中の人がテーブルの入力を楽にする機能を投稿画面に実装した、という感じのツイートが流れてきたので、よさ気だから取り込んでみた。

3x3と入力してShift+Spaceを入力すると、横３縦３のテーブルが生成される。
3x3:で右寄せのテーブル、:3x3:で中央寄せのテーブルなども生成できる。

CSV からテーブル作成

これも該当のtweetが見つからない・・。上の3x3記法のtweetを見た方が「csvをテーブルにする機能がほしいなあ」とツイートしていたのを見た。「なるほどぅ」と思ったので作った。

1,2,3
4,5,6
7,8,9

たとえば、上のcsv全体を選択してShift+Spaceを押すと次のテーブルが生成される。楽しい。

| 1 | 2 | 3 |
| --- | --- | --- |
| 4 | 5 | 6 |
| 7 | 8 | 9 |

テーブルで関数

誰得俺俺機能である。
なんと！縦に計算ができる！

たとえば、次の様なテーブルを入力する。

|品物|値段|
| --- | --- |
| その1 | 100 |
| その2 | 200 |
| その3 | 500 |
| 計 | =SUM |

この時、=SUMと書かれているセルでShift + Spaceを押すと、なんと800が挿入されるのである。

同様に、縦を計算する関数として、AVERAGE,MAX,MIN,COUNTを用意した。
このような誰得機能を作るのはとても楽しい。

テーブルのソート

誰得俺俺機能その２である。
なんと！テーブルを！ソートできる！

|品物|値段|
| --- | --- |
| その1 | 800 |
| その2 | 400 |
| その3 | 500 |

たとえばこうなっているテーブルで、ヘッダの値段という場所でShift+Spaceを押すと、値段の昇順にテーブルの行が並べ変わるのである。その状態でもう一度Shift+Spaceを押すと、降順に変わる。

フォントの装飾

太字、斜体、打ち消し、インラインコードブロックを入力するキーボードショートカットも用意した。例えば、太字にしたければ太字にしたい文字列を選択してCtrl + bを押すと、選択した文字列を**で囲むので太字になる。動揺に斜体はCtrl + i、打ち消しはCtrl + u、インラインコードブロックはCtrl + qを割り当てた。

キーボードショートカット系は、使う人によって好みが大きくあるのでどうかなと思ったけれど、オプションでOFFにできるようにしたしいいかなと。

問題点

プログラムで自動挿入された文字に関しては、Ctrl + zを押しても入力が戻らない点。かなり困る。 （2016/5/25 解決した。）

自分は使ってないけれど、Shift+Spaceは全角入力時の半角スペースのショートカットらしい。キーバインドをオプションで設定できるようにしようかな。

今後の更新予定

Markdownの構文に完全に対応していないので、レアケースをしょぼしょぼと改善していく予定。