Remark・Rehype で Markdown から HTML に変換してプレビューを確認できるオンラインエディタを作った
メインサイト Neo's World は、自作のビルドシステムでブログを配信している。Markdown で記事を書くと、Remark・Rehype プラグインを駆使して HTML 形式に変換して配信できるのだが、ローカル開発環境を用意せずとも簡単にプレビューできたらいいなと思い、オンラインエディタを作った。その名も Remark Editor。
Vercel にデプロイしているので、以下からドウゾ。
ソースコードは以下。
左カラムがエディタで、Markdown を入力後、「Parse」ボタンを押すと右カラムにプレビューが表示される。フロントエンドは Vanilla で、Vercel Serverless API にパースさせた内容を innerHTML でブチ込んでいるだけ。フロントエンドとしてクエリパラメータを受け付けたり、データを保存したりしないので、こういう雑な作り。
Remark・Rehype はブラウザ上でも動かせるっぽいように見えたのだが、どうしてもうまく行かなかったので、諦めてサーバレス API として動かすことにした。POST リクエストボディをパースしてレスポンスするだけ。このためだけに Vercel を使っている。見出し ID とリンクを振ったり、Prism.js を適用したりなど、パースの仕様はメインサイトで使用している変換処理と合わせている。
リアルタイムにパース・プレビューできたらカッコイイのかもしれないが、自分は基本的に脳内でパースができるし、タイポなどのミスがないかを最終確認するだけなので、「Parse」ボタンを手動で押すことにした。アクセスキーは用意したので、コレで少しは楽になるか…。ｗ