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のテキストを出力する。
  • Markdownhtmlのテキストはともに(独立して)クリップボードにコピーできる。
  • Markdownhtmlは別個でダウンロードできる。

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

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

使ったライブラリ

使い方

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

改善点

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

埋め込みデモ

このまま使うのは難しいので、codepenのページを利用する。

See the Pen Markdown to raw html by ikapper (@ikapper) on CodePen.

以上です。


Markdownの歴史が詳しいらしい広告:

Markdownライティング入門 プレーンテキストで気楽に書こう! (技術の泉シリーズ(NextPublishing)) | 藤原 惟 | 工学 | Kindleストア | Amazon
Amazonで藤原 惟のMarkdownライティング入門 プレーンテキストで気楽に書こう! (技術の泉シリーズ(NextPublishing))。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
タイトルとURLをコピーしました