MarkdownをHTMLにエクスポート — ライブプレビューと綺麗な出力

Markdownは構造化コンテンツを書く一番速い方法ですが、WebはHTMLで動いています。両者の橋渡しは瞬時かつ安全であるべきです。Markdownプレビューを開いて、Markdownを書き、HTMLがその場でレンダリングされるのを見て、綺麗にサニタイズされた出力をエクスポートしましょう。すべてブラウザの中で完結します。

TL;DR

Markdownを書けば、HTMLが即座に表示され、コピーも保存もできます。

入力中のライブプレビュー — 3つの表示モード（分割・エディタ・プレビュー）で、編集、閲覧、その両方ができます。
綺麗で安全なHTML — 出力はDOMPurifyでサニタイズされるため、CMSやメールに貼り付けても安全です。
コピーまたは保存 — HTMLをクリップボードに取得するか、独立した.htmlファイルをローカルに保存します。

Markdownとは何か

Markdownは、シンプルで読みやすい記号でテキストに書式を設定する軽量マークアップ言語です。#で見出し、ダッシュで箇条書き、星印で強調が作れ、普通のURLがリンクになります。ソースはほぼプレーンテキストのままなので、段落以上の構造化コンテンツを書く場面ではすぐに選ばれます。

技術的な文章が書かれるあらゆる場所で使われています — READMEファイル、ドキュメントサイト、ブログ記事、リリースノート、社内Wiki。理由は単純で、Markdownは道具なしでも書けて読め、必要なときにリッチなHTMLに変換できるからです。

内部では、このツールはmarkdown-itエンジンを使い、CommonMark仕様に従ってMarkdownをレンダリングします。CommonMarkは、Markdownの標準化され明確に定義された解釈です。つまり、古いMarkdown系統にありがちだった、方言によって結果が違うという予想外の挙動ではなく、予測可能で一貫した出力が得られます。

プレビューと表示モード

入力すると、プレビューにHTMLがライブでレンダリングされます。3つの表示モードで何を見るかを制御します。

分割 — 左にエディタ、右にレンダリングされたプレビュー。既定値であり、書いている間に最も適したモードです。ソースと結果が一緒に見えます。
エディタ — Markdown入力のみ、全幅。執筆に集中していてプレビューが不要なときに便利です。
プレビュー — レンダリングされたHTMLのみ。完成した結果を読んだり、誰かに見せたりするのに便利です。

モードはいつでも切り替えられます。分割モードとプレビューモードでは、レンダリングされた出力がタイプごとに更新されます。

手順：HTMLをエクスポートする

Markdownプレビューは完全にブラウザ内で動きます。手順は次のとおりです。

Markdownを入力または貼り付けます。 入力欄に入力します。テンプレートから始めたい場合はサンプルで例を読み込み、リセットですべて消去できます。
表示モードを選びます。 ソース、結果、その両方のどれを見たいかに応じて分割、エディタ、プレビューを選びます。
4つのオプションを切り替えます。 それぞれMarkdownのレンダリング方法を変えます。
- 改行を反映 — テキストの単一改行が、出力では<br>になります（折りたたまれません）。
- URLをリンク化 — https://example.comのような裸のURLが、自動的にクリック可能なリンクになります。
- 文字置換 — ストレートクォートをスマートな組版（カールクォートやダッシュ）に置き換えます。
- 生HTML — Markdown内にインラインHTMLを埋め込めるようにします。注意: オンにしても出力はサニタイズされます（下記参照）。危険なタグやハンドラは、あなたが見る・コピーする前に除去されます。
統計パネルを確認します。 文字・単語・行・見出し・リンク・コードブロックを表示します。構造が意図どおりに出力されたかを手早く確かめる手段です。
エクスポートします。 HTMLをコピーをクリックしてレンダリングされたHTMLをクリップボードに置くか、HTMLを保存で独立した.htmlドキュメントを保存します。MarkdownをコピーやMarkdownを保存で.mdソースをエクスポートすることもできます。

サニタイズと安全性

ここが出力をCMS、メール、Wikiに貼り付けても本当に安全にする部分です。レンダリングされたHTML — Markdown構文から来たものも、あなたが埋め込んだ生HTMLから来たものも — はすべて、プレビューやクリップボードに届く前にDOMPurifyを通ります。

DOMPurify（USE_PROFILES: { html: true }で設定）は危険な部分を除去します。<script>タグ、onclickのようなインラインイベントハンドラ、コードを実行できそうな他のベクトルです。またstyleタグとstyle属性も禁止するため、スタイルの細工はすり抜けられません。万が一DOMPurify自体が失敗しても、正規表現ベースのフォールバックサニタイザが最悪のものを捕捉し、生の安全でないHTMLが渡ることはありません。

生の入力がサニタイズ後の出力と異なるとき、ツールは**「安全でないHTMLをプレビューから削除しました。」**と報告します — 除去された内容の件数です。この通知は、何かが除去されたという合図であり、機密性の高い場所に貼り付ける前にまさに望むものです。

制限と正直なところ

あなたが何を得るか正確に分かるよう、いくつか正直な制約を示します。

CommonMarkであり、GitHub Flavored Markdownではありません。 このツールはmarkdown-itでCommonMarkに従います。GitHub固有の拡張（表や取り消し線~~text~~）をMarkdown構文単体ではレンダリングしません。表や取り消し線が必要なら生HTMLを有効にしてHTMLを直接書いてください — それでもサニタイズされます。
styleは除去されます。 DOMPurifyがstyleタグと属性を禁止するため、生HTMLのインラインスタイルは出力に残りません。
生HTMLは任意で、それでもサニタイズされます。 生HTMLオプションはインラインHTMLをMarkdownパーサに通しますが、レンダリング結果はその後にサニタイズされます。安全ですが、任意のマークアップを実行する手段ではありません。

よくある質問

HTML出力は安全ですか？

はい。レンダリングされたHTMLはすべて、プレビューやコピーボタン、ダウンロードに届く前にDOMPurifyを通ります。スクリプト、イベントハンドラ、styleタグと属性は除去されます。何かが除去されると「安全でないHTMLを削除しました」という通知が表示されます。

GitHubの表に対応していますか？

Markdown構文経由では対応していません。このツールはCommonMarkに従っており、ネイティブの表構文はありません。表を入れるには生HTMLを有効にして<table>マークアップを直接書いてください — 他のHTMLと同じようにレンダリングされ、サニタイズされます。

HTMLファイルを保存できますか？

はい。HTMLを保存で、基本的なスタイルを備えた独立した.htmlドキュメントを保存できます。どのブラウザでも開けます。別の場所に貼り付けたい場合はHTMLをコピーでクリップボードに取得することもできます。

CommonMarkとは何ですか？

CommonMarkは、古い方言の曖昧さを取り除いたMarkdownの標準化された仕様です。このツールはmarkdown-itエンジンを使ってCommonMarkをレンダリングするため、同じ入力は確実に同じ出力になります。GitHub Flavored Markdownではなく、表や取り消し線といった機能はコア仕様の一部ではありません。