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の歴史が詳しいらしい広告:

Bitly

コメント

タイトルとURLをコピーしました