Markdown → HTML変換ツール
Markdownをリアルタイムプレビュー付きで綺麗なHTMLに変換 — 見出し、リスト、リンク、コードブロックなど、すべてブラウザ内で完結。
1,115回閲覧
何が変換されるか
この変換ツールは日常的に使うMarkdown記法をカバーしています:# 見出し(1〜6レベル)、**太字**、*斜体*、`インラインコード`、``` で囲むコードブロック、[リンク](url)、> 引用、番号付き・番号なしリスト、水平線、段落など。出力はCMSやメールテンプレート、静的サイトにそのまま貼り付けられるクリーンなセマンティックHTMLで、ソースコードとレンダリング後のプレビューの両方が表示されます。
入力内のHTMLはそのまま通されるのではなくエスケープされるため、信頼できないテキストを貼り付けてもマークアップが注入される心配はありません。CommonMarkの完全な仕様に含まれる複雑なケース(4段階のネストしたリスト、参照リンクなど)には専用のビルドツールが適していますが、本ツールは日常的な執筆ニーズの95%をカバーします。
知っておくべきこと
- 生のHTMLはエスケープされ、実行はされません — スクリプトタグやインラインのイベントハンドラを貼り付けても、実行されるのではなく見える文字列としてそのまま表示されます。これは、信頼できないテキストを安全に貼り付けられるようにするための意図的な設計です。
- ゆるいリストと詰まったリストで出力が変わります — リスト項目の間に空白行があると、CommonMarkは各項目を独自の<p>で囲みます(「ゆるい」リスト)。空白行がなければ項目はそのままインライン内容として扱われ(「詰まった」リスト)、レンダリングされるHTMLの行間が変わります。
- 非常に深いネストには実用上の上限があります — 4段階以上のネストしたリストや参照形式のリンク定義はCommonMarkとして有効ですが、ブラウザ内のライブプレビューよりも専用のビルド時パーサーの方が適したエッジケースです。
よくある質問
テーブル(表)には対応していますか?
パイプ形式のテーブルに対応しています(| a | b | と --- の区切り行)。左寄せ・中央寄せ・右寄せを示すコロンも認識されます。
なぜHTMLタグがそのまま文字として表示されるのですか?
仕様どおりの動作です — 安全性のため、生のHTMLはエスケープされます。同等の表現をMarkdownで書くか、入力元を信頼できる場合は手動でエスケープを解除してください。
行間の扱いはMarkdownのルールに従いますか?
はい:空白行は段落を区切り、行末の半角スペース2つは<br>を生成します。段落内の単一の改行は、CommonMarkの仕様どおりに結合されます。
ネストしたリストやコードブロック内の書式が予想と異なって見えるのはなぜですか?
パースが2段階で行われるためです — ブロック構造(リスト、コードフェンス、引用)は、インデントと行の記号だけから最初に解決され、その後で各ブロック内にインライン書式(太字、斜体、リンク)が適用されます。フェンスで囲まれたコードブロックの内容はインラインパスで一切変更されないため、そこでは**この部分**が太字にならずそのままの文字列として残ります — これはバグではなく、CommonMarkの想定どおりの動作です。
コアのCommonMarkと「GitHub Flavored」機能の違いは何ですか?
コアのCommonMarkは見出し、強調、リスト、引用、コードブロック、リンクを正確に定義しています。テーブル、取り消し線(~~テキスト~~)、タスクリストのチェックボックス([ ] / [x])は、その上に追加されたGFM拡張機能です — 本ツールを含む多くの変換ツールで広くサポートされていますが、後で出力を貼り付ける先が厳密なCommonMarkのみの実装だとは限らないため、必ずしも保証されているわけではありません。
関連ツール
問題を報告
Markdown → HTML変換ツール
コメント
まだコメントはありません — 最初のコメントを書いてみましょう！