メインコンテンツへスキップ
Yunknow Toolbox

← ブログ一覧へ

Markdown を HTML に変換する方法(そして元に戻す)

Markdown は、プレーンな文字で整形済みテキストを書けます——# は見出し、- は箇条書き、**太字** は強調。HTML はブラウザが実際にレンダリングするタグ付きマークアップです。Markdown を HTML に変換するとは、この省略記法を <h1>・<ul>・<strong> に変えること。逆方向は、雑然とした HTML をきれいな Markdown に戻すことです。

私たちのコンバーターが実際に出力するもの。 ## Notes と See the [docs](/tools/) for **details**.、2 項目のリストを Markdown → HTML 変換に通すと、こう返ります。

<h2>Notes</h2>
<p>See the <a href="/tools/">docs</a> for <strong>details</strong>.</p>
<ul>
<li>one</li>
<li>two</li>
</ul>

付け加えていないものに注目してください。ラッパーの <div> もクラスも <html> の骨組みもなく、ブロック要素だけです。すでに独自のレイアウトを持つ CMS に貼るときは、これがほしい形です。リスト項目が <p> で包まれていないのは、元のリストが loose ではなく tight だからです。

Markdown は何になるか

MarkdownHTML
# タイトル<h1>タイトル</h1>
- 項目<ul><li>項目</li></ul>
**太字**<strong>太字</strong>
[テキスト](url)<a href="url">テキスト</a>
```コード```<pre><code>コード</code></pre>

変換器は Markdown を順にたどり、対応するタグを出力します。多くのツールは GitHub Flavored Markdown に従い、元の仕様に加えて表・タスクリスト・フェンス付きコードブロックをサポートします。

2 つの記法を、私たちのMarkdown ↔ HTML 変換ツールの出力そのままで。見出しが返すのは

<h1>Title</h1>

強調の 1 行が返すのは

<p><strong>bold</strong> and <em>italic</em></p>

見出しは素のまま、強調の行は <p> に包まれて返りました。Markdown の意外の大半はこの規則から来ます。ブロックレベルの記法は段落を置き換え、インラインの記法は段落の中に住みます。リンクもインラインなので [link](https://yunknow.cc/) が生むのは

<p><a href="https://yunknow.cc/">link</a></p>

で、アンカーは単独ではなく段落の中に入れ子になります。

Markdown を HTML に

最も一般的な方向です:README やブログ記事を Markdown で書き、ページ・メール・CMS に貼る HTML が必要な場合。Markdown を貼り付け、変換し、HTML をコピーします。付属のプレビューで、使う前に整形が正しいか確認できます。

HTML を Markdown に

逆方向は片付けに便利です。Web ページから一部をコピーすると <div> やインラインスタイルの塊として届きますが、Markdown に変換すれば、メモや文書に本当に必要な言葉と構造だけになります。HTML 固有の要素(インライン CSS、複雑な入れ子の表)は Markdown で表現できないことがあり、簡略化されます。

Markdown のよくある落とし穴

「なぜ描画されない?」の多くは、いくつかの習慣が原因です。

  • リストの前には空行を。 段落のすぐ下にリストを続けると、多くのパーサーは同じ段落として扱います。まず 1 行空けましょう。
  • 単一の改行は無視されがち。 Markdown は改行 1 つを空白に畳みます。強制改行したいときは行末に半角スペース 2 つ、または空行で新しい段落にします。
  • 語中のアンダースコアが斜体を招くことがある。 一部の方言では snake_case_name の中央が斜体になります。バックティックで囲むか、snake\_case\_name のようにエスケープを。
  • 半角 4 つのインデントはコードブロックに。 意図しないインデントが、こっそりテキストを <pre> 出力に変えます。

次が「なぜこうなる」という報告を最も多く生む罠です。この入力は 2 行のテキストの間に改行が 1 つだけあり、変換ツールが返すのは

<p>line one
line two</p>

改行はソースの中には残りますが <br> は生まれません。2 行とも同じ <p> に入り、ブラウザは連続した 1 行として描画します。Markdown では単一の改行は改行ではありません。行末に空白 2 つ、バックスラッシュ、または新しい段落のための空行が必要です。対照的に、リストはきちんとした構造になります:

<ul>
<li>one</li>
<li>two</li>
</ul>

つまり「改行が消えた」と「リストは問題なかった」は、同じ事実の裏表です。

よくある質問

Markdown に標準はある? 最も標準に近いのは CommonMark で、GitHub Flavored Markdown が表・タスクリスト・打ち消し線を追加しています。方言により差があり、あるサイトで動く脚注記法が別のサイトでは効かないこともあります。

Markdown の中に HTML を書ける? はい——多くのレンダラは生の HTML をそのまま通すため、Markdown で表せない <sub> や <details> に便利です。サニタイズするレンダラでは除去されることがあります。

出力に <html> や <body> は含まれる? いいえ。変換器が出すのは HTML の断片——<h1> や <p> などだけです。単体のページが必要なら自分で完全な文書に包んでください。はるかに厳格な規則を持つもう一つのマークアップ言語は、XML の解説をどうぞ。

ブラウザ内で、プライバシーを守って

Markdown ⇄ HTML 変換ツールは完全に端末上で動作し——アップロードなし——スクリプトを実行しないサンドボックスのライブプレビューでレイアウトを表示します。どちらの方向にも変換でき、プレビュー後にコピーまたはダウンロードできます。

関連ツール

#dev#markdown#html