Markdown内のHTML — HTMLパススルー

MarkdownからHTMLへの変換時に、生のHTMLタグがどのようにパススルーされるかを理解します。動作する要素、セキュリティの考慮事項、生のHTMLを使用すべきタイミングを学びます。

Advanced

詳細な説明

Markdown内の生のHTML

Markdownの設計原則の一つは、ドキュメントのどこでも生のHTMLを使用できることです。ほとんどのMarkdownパーサーはHTMLタグをそのまま出力に渡します。

ブロックレベルのHTML

ブロックレベルのHTML要素(<div>、<table>、<section> など)は、前後のコンテンツから空行で区切る必要があります。

重要: ブロックレベルのHTML要素内ではMarkdown構文は処理されません。<div> 内の **太字** は <strong> に変換されません。

インラインHTML

インラインHTML要素(<span>、<abbr>、<mark> など)はMarkdownテキスト内で使用できます。ブロックレベルHTMLとは異なり、インラインHTML要素の周囲ではMarkdown構文は処理されます。

生のHTMLの一般的な使用例

  • カスタム属性: id、class、style を要素に追加
  • 複雑なテーブル: colspan、rowspan、複数行セル
  • 埋め込みメディア: <video>、<audio>、<iframe> 要素
  • 詳細/サマリー: <details> と <summary> による折りたたみセクション

セキュリティの考慮事項

多くのMarkdownレンダラーはXSS攻撃を防ぐためにHTMLをサニタイズします。<script>、<style>、イベントハンドラ(onclick、onerror)は通常除去されます。

ユースケース

HTMLパススルーは、Markdown構文では不十分な場合に使用されます — 動画の埋め込み、複雑なレイアウトの作成、カスタムCSSクラスの追加、<details>、<figure>、<aside>などのセマンティックHTML要素の使用などです。MarkdownのシンプルさとHTMLの完全な表現力の橋渡しをします。

試してみる — Markdown to HTML Converter

フルツールを開く →