ぬじろぐ

好きなゲーム発表ぬこちゃん

ブラウザで動作するシンプルなMarkdown Editorを作った


作ったって言うか、javascriptに関しては素人なのでサンプルまるまるコピペでHTMLとCSSをいじるだけでどうにかなる部分だけカスタマイズしたという感じです。

欲しかった機能

  • アウトライン表示 →なぜかこれがデフォルトでついてないエディタがすごく多い!
  • ハイライト、リストの入力補完、見出しごとの折り畳み
  • 読み込み/保存
  • ドラッグ&ドロップでファイル読み込み
  • プレビュー(これはなくてもいい)

できたもの

動作サンプル
nujisato.github.io

githubに置いてあるものをまるまる保存してindex.htmlをブラウザで開けば動作します。
javascriptCDNから読み込んでいるのでオンラインでないと動きませんが、配布元からファイルを落としてきて参照先を書き換えれば完全ローカルで動くはず。

Aceが優秀なので、何も設定しなくてもエディタとして一通りのことはできるようです。
Milligramはめちゃくちゃ軽くてシンプルなので気に入ってる*1

そのままではうまくいかなかったところ

script.js

  • Markdownパーサはmakerdを使って」と指定したのだが、出力されたコードをそのまま貼ってもうまく動作しなかったので自分で修正
  • アウトライン表示とプレビューの両方リアルタイム更新がうまく動かず、入力するたびAceがバグる変なことになっていた。ここも自分で少し直して動くようになった。書き方が正しいのかは知らん…
  • スクロールバーが出るとアウトラインエリアがどんどん狭くなる →スクロールバーの設定をいじってあまり気にならないようにした

直せてないところ

  • 長文を書くとなんか最後の行が表示されない?

実際に使ってみると結構直したいところが出てくる。

感想

意外に簡単にできるんですね。

VScodeが単なるテキストエディタとして使いやすいなあと思ってて、エディタ部分だけ分離してもっと気軽なエディタとして出して欲しいなと思ってるんですが、そのものずばりなものって無いんですよね。
MicrosoftからmonacoというVScodeのエディタ部分だけweb用の組み込みエディタとして分離したやつが出てるんですけど、デスクトップ上で使えるものではないし
誰かこれ使ってただのテキストエディタ作ってくれませんかね…爆速で起動するやつ…

*1:同じく超軽くてシンプルなCSSフレームワークだとSkeletonというのもよく使う