Webブラウザ上でmdをhtmlに変換する簡易エディタを作った

以前、記事をMarkdownで書いてhtmlに変換してからアップするという流れを作った。しかし、bash上でコマンドによりhtmlに変換しているので、bashが操作できる環境でないと、変換作業ができない。

そして最近では、iPadで記事を書くことも増えたので、既存の方法では面倒になってきた。

そこで、Markdownからhtmlに変換するのをウェブ上でできればいいと考えた。既存のサービスがないか少しだけ調べたが、htmlでのプレビューのようなものが多かったので、自作することにした。~~ホスティングは面倒なので、codepenで作っておくことにした。~~github pagesにも置いた。

以前のはここ ==> Markdown to raw html 新しいのはここ ==> md2html

更新
機能
使ったライブラリ
使い方
改善点
埋め込みデモ

更新

2020/12更新: サニタイズ（Purify）をチェックボックスでON・OFFできるようにした。デモを少し調整した。
2021/01更新: 簡易セーブロード機能を付けてgithub pagesの方に移した。古い方はそのままにしておく。

機能

codepenのころからある機能:

Markdown形式のテキストを入力すると変換済みのhtmlのテキストを出力する。
Markdownとhtmlのテキストはともに（独立して）クリップボードにコピーできる。
Markdownとhtmlは別個でダウンロードできる。

github pagesの方に追加した機能:

Bootstrapを使用してデザインを少しばかり変更
webブラウザへのテキストのセーブ
webブラウザに保存されたテキストのロード

使ったライブラリ

Marked.js Documentation
- Markdownからhtmlに変換できるライブラリ
GitHub - cure53/DOMPurify: DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
- 一応のサニタイズのために使用
jQuery
- DOMの取得などに使用
clipboard.js — Copy to clipboard without Flash
- クリック1つでコピーできるライブラリ
Bootstrap - 世界で最も人気のあるフロントエンドのコンポーネントライブラリ
- クラス指定で簡単デザインできる。

使い方

左側のテキストエリアに文字を入力すると、右側にhtmlに変換された形式で出力される。

改善点

iPadではダウンロードができない。他のモバイル端末も恐らくできない。
入力したmarkdownテキストをDropboxなどに手軽にバックアップできるようにしたい。
Markdownのテキストエリアへのペーストを行うと、変換がすぐに実行されない。 --> 直した。
- これはイベント監視でなんとかなるか？ --> 直した。