作ったって言うか、javascriptに関しては素人なのでサンプルまるまるコピペでHTMLとCSSをいじるだけでどうにかなる部分だけカスタマイズしたという感じです。
欲しかった機能
- アウトライン表示 →なぜかこれがデフォルトでついてないエディタがすごく多い!
- ハイライト、リストの入力補完、見出しごとの折り畳み
- 読み込み/保存
- ドラッグ&ドロップでファイル読み込み
- プレビュー(これはなくてもいい)
できたもの
動作サンプル
nujisato.github.io
githubに置いてあるものをまるまる保存してindex.htmlをブラウザで開けば動作します。
javascriptはCDNから読み込んでいるのでオンラインでないと動きませんが、配布元からファイルを落としてきて参照先を書き換えれば完全ローカルで動くはず。
Aceが優秀なので、何も設定しなくてもエディタとして一通りのことはできるようです。
Milligramはめちゃくちゃ軽くてシンプルなので気に入ってる*1
そのままではうまくいかなかったところ
script.js
- 「Markdownパーサはmakerdを使って」と指定したのだが、出力されたコードをそのまま貼ってもうまく動作しなかったので自分で修正
- アウトライン表示とプレビューの両方リアルタイム更新がうまく動かず、入力するたびAceがバグる変なことになっていた。ここも自分で少し直して動くようになった。書き方が正しいのかは知らん…
- スクロールバーが出るとアウトラインエリアがどんどん狭くなる →スクロールバーの設定をいじってあまり気にならないようにした
直せてないところ
- 長文を書くとなんか最後の行が表示されない?
実際に使ってみると結構直したいところが出てくる。