jaen

Markdownエディタ・HTML変換

Markdownをリアルタイムプレビューしながら編集できるエディタです。GitHub Flavored Markdown（テーブル・タスクリスト・取り消し線など）に対応し、変換後のHTMLコードのコピーや、.md/.htmlファイルとしてのダウンロードができます。手元のMarkdownファイル（.md など）を読み込んで表示・編集することもできます。

Markdownファイル（.md など）をここにドラッグ&ドロップして読み込めます

使い方

  1. 左側のエディタにMarkdownを入力すると、右側に変換結果がリアルタイムに反映されます。
  2. 既存のMarkdownファイルを編集したい場合は、「ファイルを開く」ボタンから選択するか、エディタにファイルをドラッグ&ドロップすると内容が読み込まれます。
  3. 「プレビュー」タブでは、実際にどのように表示されるかを確認できます。テーブル・タスクリスト・取り消し線などのGitHub Flavored Markdown（GFM）記法にも対応しています。
  4. 「HTMLコード」タブに切り替えると、変換後のHTMLソースコードが表示され、「クリップボードへコピー」でそのまま他のシステムに貼り付けられます。
  5. 「Markdown (.md) をダウンロード」「HTML (.html) をダウンロード」で、それぞれの形式のファイルとして保存できます。ファイルを読み込んだ場合は、元のファイル名で保存されます。

このツールについて

Markdownリアルタイムプレビュー・HTML変換ツールは、Markdownで書いた文章をリアルタイムにプレビューしながら、HTMLへの変換・抽出も行えるツールです。READMEファイルの下書き、ブログ記事の執筆、ドキュメントのHTML化など、Markdownを扱うさまざまな場面で活用できます。

テーブル、タスクリスト（チェックボックス）、取り消し線、コードブロックのシンタックスハイライト用クラス付与といった、GitHub Flavored Markdown（GFM）の主要な拡張記法に対応しています。

生成されたHTMLは、ブラウザ内でDOMPurifyによるサニタイズ処理を行った上で表示・出力しており、Markdown内に埋め込まれた不正なスクリプトなどが実行されないよう配慮しています。

「## Release」を入力するとHTMLコードは「<h2>Release</h2>」になります。「~~draft~~」なら「<del>draft</del>」へ変換されます。HTMLコードのコピーは本文の断片で、HTMLのダウンロードはスタイルを含む文書になる点も確認できます。

通常の改行だけではHTMLの強制改行になりません。段落を分けるときは空行、行を明示的に折るときはMarkdownの改行記法を使います。入力中の画像URLはプレビューで参照されるため、外部画像を含む文書ではその配信元への通信が発生します。

よくある質問

GitHub Flavored Markdown（GFM）とは何ですか？

GitHubで採用されている、標準のMarkdownを拡張した記法です。テーブル、取り消し線（~~text~~）、タスクリスト（- [ ] や - [x]）などが追加で使用できます。本ツールはこれらの記法に対応しています。

Markdown内にHTMLタグを直接書くことはできますか？

生のHTMLタグを含むMarkdownも変換されますが、出力時にDOMPurifyによってスクリプトタグなど危険な要素は除去されます。安全性を優先しているため、一部の高度なHTML表現は反映されない場合があります。

ダウンロードしたHTMLファイルはそのまま公開できますか？

ダウンロードされるHTMLファイルは、最小限のスタイル（見出し・表・コードブロックなど）を含む単体のHTML文書として出力されるため、そのままブラウザで開いたり、簡易的なページとして利用したりできます。本格的なデザインを適用したい場合は、CSSを追加で調整してください。

入力したMarkdownはサーバーに送信されますか？

送信されません。ファイルの読み込み、プレビューへの変換、HTMLコードの生成、ファイルのダウンロードは、すべてブラウザ内のJavaScriptで完結します。