MarkdownをHTMLへ変換するツールを作りました

2023.04.10

SE・情シス担当歴20年のコウノです。
ブログやWebサイトに記事を掲載する際に、原稿を用意してからCMSに流し込むことがあると思います。この作業、意外と時間がかかりませんか？

私は、ブログの記事をWebサイトに掲載する作業を効率化するために、原稿をマークダウンで書いているのですが、HTMLに変換するのに時間がかかるため、Markdownの原稿をワンクリックでHTMLタグに変換するツールを作りました。

本記事では、JavaScriptでMarkdownをHTMLに変換するプログラムの作り方を解説します。プログラミングを始めて20年の私の経験をもとに、開発テクニックを解説しますのでぜひ参考にしてください。

なお、JavaScriptの勉強法や業務改善に活用する方法を知りたいという人はお気軽に下記リンクからメッセージください。

背景・活用事例

ブログに記事を投稿するときは、Wordやグーグルドキュメントで原稿を完成させてからHTMLにマークアップしています。しかし、原稿の見出しや本文をHTMLタグで囲う作業が想像以上に時間がかかるので、Markdownで原稿を書いてHTMLタグに変換する運用に変えました。

Markdown記法すべてを完璧にHTMLタグに変換するのは難しいですが、ブログ投稿に必要なタグに限定した機能であればJavaScriptの正規表現で置換するだけでなんとかなりそうなので作ってみました。

見出し（h1～h6）、強調（strong）、リスト（li）、本文（p）だけ変換します。必要に応じて増やします。

Markdown・HTML・完成イメージが横並びで分かると便利かなと思ったので、各エリアを横並びの３カラムにしました。記事を投稿しようと考えているサイトのCSSを読み込めば、プレビューエリアのリアリティーが増します。

〇〇から始まる行を△△タグで囲うという置換を正規表現を用いて実装しています。正規表現はあまり得意じゃないだけど、ひとつ出来ればコピペで変更点を変えるだけだからがんばりました。

本記事ではMarkdownで書いたドキュメントををHTML形式に変換するコンバータの作り方を解説しました。JavaScriptを活用して業務を効率化する方法はたくさんあります。他にも記事を書いておりますので参考にしてみてください。

Author Profile

コウノ（）
職歴年のIT技術者です。エクセル・Web制作が得意。