【自作フリーソフト】ブラウザで動作する超シンプルなmarkdownエディタ

noteとかQiitaみたいに、ブラウザ上で簡単にmarkdownで文書が作成できる超シンプルなエディタ「かんたんmdくん」を作成しました。画面左側にmarkdownで文字を入力すれば、右側にリアルタイムでプレビューが表示されます。

https://phys-ken.github.io/2024infor.../tools/markdown_edit/

実際に動作している画面

情報の授業で生徒にhtmlのことは知ってほしいけど、実際に書かせていたらいくら時間があっても足りないなと思って、mdで書いてもhtml出力できる環境を探していましたが、多くのブラウザで動作するエディタはアカウント作成が必須なことが多い印象でした。「ただただmakdownを書いてhtml出力するだけ」のエディタが見つからなかったので、自作しました。

こだわりポイント

情報の指導と関係なくこだわったところは、数式入力・数式表示です。数学や理科の資料作成にも便利に使えるよう工夫しました。情報の授業で最低限markdownの書き方を説明すれば、生徒はこのソフトでレポートを書くことも可能です。
Googleドキュメントの計算式入力機能も慣れれば簡単なのかもしれませんが、リアルタイムで入力内容が上書きされるのは初学者にとってあまり楽じゃないような気がしています。

htmlでも実は書ける。

このエディタ、実は普通にhtmlで入力してもリアルタイムで右側にプレビューされるのです(なぜか改行が2行続くとエラーになりますが...。)。

htmlでを書いても、改行さえなければ右側でプレビューが表示されます。

初回授業ではmarkdownの存在を知らせずにhtmlを書いてもらって、2回目以降は「実はね...」なんて言ってmarkdownを紹介するという展開を考えています。

今後は、marpなどの他のmarkdown拡張機能との連携できるように改善していきます。

ライセンス

「かんたんmdくん」は、GNU General Public License (GPL) v3のもとで公開されています。このライセンスに基づき、アプリのコードは自由に使用、改変、再頒布が可能です。
詳細はこちら をご覧ください。