HTMLコード要素からMarkdownコード構文への変換

HTML <code>、<pre>、<pre><code>要素をMarkdownのインラインコードとフェンスコードブロックに変換する方法を解説。言語検出、エンティティデコード、シンタックスハイライトヒントを含みます。

Media & Links

詳細な説明

HTMLコード要素からMarkdownへの変換

HTMLではインラインコードに <code>、コードブロックに <pre><code> を使用します。Markdownではインラインコードにバッククォート、コードブロックにトリプルバッククォート(またはインデント)を使用します。

インラインコード

<code> タグはシングルバッククォートラッパーに置き換えられます。

コードブロック

<pre><code> の組み合わせはコードブロックとして認識され、トリプルバッククォートで囲まれます。

言語検出

多くのHTMLコードブロックにはシンタックスハイライト用の言語クラスが含まれています。良いコンバーターは言語ヒントを抽出します。一般的なクラスパターンには language-*lang-*highlight-* があります。

HTMLエンティティデコード

HTML内のコードにはエンコードされたエンティティが含まれることがあります。変換時にエンティティをリテラル文字に戻す必要があります:

  • &lt;<
  • &gt;>
  • &amp;&
  • &quot;"

単独のpreタグ

<code> なしの単独の <pre> もプリフォーマットテキストを示すため、コードブロックに変換されるべきです。

ユースケース

コードブロック変換は、技術ドキュメント、APIリファレンス、チュートリアル、開発者ブログ記事の移行時に重要です。正しい言語検出によりシンタックスハイライトが保持され、適切なエンティティデコードによりコードスニペットが機能的であることが保証されます。

試してみる — HTML to Markdown

フルツールを開く