Markdownエディタは多数存在します。それらを使うことで、自分のWebアプリケーション内にMarkdownを使った編集機能を簡単に追加できます。特に開発者向きのWebサービスで役立つでしょう。 今回紹介するMarkdown EditorはそんなMarkdownエディタの一つです。シンプルですが、使いやすいエディタです。

Markdown Editorの使い方

メイン画面です。左側がエディタ、右側にプレビューというスタンダードなスタイルです。

スクロール追従機能があります。

編集のリアルタイム反映もあります。

テーマをサポートしており、カラーリングが多彩に用意されています。

プレビューだけの表示。

逆に編集だけにも。

Markdown Editorのダウンロード機能ではHTMLファイルをダウンロードできます。CodeMirrorを使うことでテーマが多彩に使えます。自分のサイトの雰囲気に合わせて、またはユーザが自由に選択できる仕組みにしてもいいでしょう。ベースにReactを用いているようです。

Markdown EditorはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Markdown Editor by Lam Pham completejavascript/markdown-editor: A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs and Create-react-app