Markdown変換でのHTMLインラインスタイルの処理

Markdown変換時にHTMLインラインスタイル(style属性)がどのように処理されるかを解説。近似可能なスタイルと失われるスタイルについて学びます。

Text Formatting

詳細な説明

HTMLインラインスタイルからMarkdownへの変換

MarkdownはCSSスタイリングをサポートしないため、インライン style 属性は通常変換時に除去されます。ただし、一部のスタイルはMarkdown構文で近似できます。

Markdownにマッピングされるスタイル

特定のCSSプロパティにはMarkdownの同等表現があります:

  • font-weight: bold**テキスト**
  • font-style: italic*テキスト*
  • text-decoration: line-through~~テキスト~~(GFM)

失われるスタイル

ほとんどのCSSプロパティにはMarkdownの同等表現がなく、単純に削除されます:

  • colorfont-sizetext-decoration: underlinebackground-color など

スタイルの意図の保持

スタイル付きHTMLを変換する際、スタイリングの背後にある意図を考慮します:

  • 色付きテキスト — 「エラー:」のようなコンテキスト語を追加
  • フォントサイズの変更 — セクションヘッダーとして使用されている場合、適切な見出しレベルに変換
  • 背景ハイライト — 太字にするか引用ブロックを使用して注意を引く
  • 配置 — Markdownはテーブル外でのテキスト配置をサポートしない

ユースケース

インラインスタイルの処理は、リッチテキストエディタ(TinyMCEやCKEditor)、WYSIWYGメールビルダー、ワードプロセッサが生成するHTMLからコンテンツを変換する際に重要です。何が失われるかを理解することで、変換後のクリーンアップを計画できます。

試してみる — HTML to Markdown

フルツールを開く