About
表示言語: 日本語 英語に切り替え

Markdown を HTML に

左に Markdown を貼り付け、右にレンダリング後の HTML (またはそのソース) を表示します。ブラウザでライブ動作します。

  1. 左に Markdown を入力または貼り付けます。
  2. 入力に合わせて右のプレビューが更新されます。
  3. レンダリング出力ではなくタグを見るには、表示を HTML ソースに切り替えます。
  4. クリップボードにソースを置くには HTML をコピーを、単体ファイルがほしいときは .html をダウンロードをクリックします。
何ができるのか?

これは CommonMark に GitHub Flavored Markdown (GFM) を加えたもので Markdown を HTML に変換し、ソフト改行は <br> として描画します。レンダリング済みプレビューを見たり、HTML ソース表示に切り替えて生成されたタグを確認したりできます。出力はブログプラットフォーム、メールツール、その他 HTML を受け付けるあらゆる場所への貼り付けに適しています。

例

入力 Markdown:

# Release notes

We shipped **three** things this week:

- [x] Faster cold start
- [ ] Dark mode (next week)

See the [docs](https://example.com/docs) for details.

```js
console.log("hello");
```

レンダリング後の HTML ソース:

<h1>Release notes</h1>
<p>We shipped <strong>three</strong> things this week:</p>
<ul>
<li><input type="checkbox" checked disabled> Faster cold start</li>
<li><input type="checkbox" disabled> Dark mode (next week)</li>
</ul>
<p>See the <a href="https://example.com/docs">docs</a> for details.</p>
<pre><code class="language-js">console.log("hello");
</code></pre>

よくあるエラーと落とし穴

Markdown のレンダリングで起きる意外な結果の多くは、いくつかの構文上の落とし穴に集約できます。プレビューがおかしければ、たいていその一つが原因です。

  • リストの前に空行がない。 "Intro text\n- item" は 1 段落としてレンダリングされます。導入と最初のリスト項目の間に空行を入れてください。
  • 段落にしたかったのにインデントされたコードブロック。 先頭の 4 つのスペースはどの行もコードブロックに変えます。インデントを外すか、明示的に fenced の ``` ブロックを使ってください。
  • 壊れたテーブル。 各 GFM テーブルには区切り行 (| --- | --- |) が必要で、各列につき 3 つ以上のハイフン、各行に同数のパイプが必要です。
  • URL にスペースを含むリンク。 [click](my page.html) はパーサーを壊します。スペースを %20 として URL エンコードするか、山括弧を使ってください: <my page.html>。
  • 単語内のアスタリスク。 wild*card は周囲のテキストによって強調にレンダリングされたりされなかったりします。バックスラッシュでエスケープ: wild\*card。
  • コードブロック内の HTML エスケープ。 &lt; を含んだスニペットはすでにエスケープ済みなので文字どおりに表示されます。エスケープ前の生のソースを貼り付けてください。
よくある質問

どの Markdown フレーバーに対応していますか?

CommonMark に GitHub Flavored Markdown (GFM)。テーブル、fenced コードブロック、タスクリスト、取り消し線、自動リンクされた URL が含まれます。段落内の改行は breaks オプションが有効なので <br> タグになります — これは GitHub やほとんどのチャットアプリでのコメントレンダリングと一致します。

Markdown 内の HTML はサニタイズされますか?

いいえ。レンダリング済みプレビューは既定で生の HTML をそのまま通します。埋め込まれた <details> や <kbd> などを機能させるためです。信頼できない Markdown を貼り付け、その出力を DOMPurify のようなサニタイザーを通さずに公開サイトにコピーしないでください。

脚注、数式、図はサポートされますか?

いいえ。これは素の GFM です。脚注、数式 (KaTeX/MathJax)、Mermaid 図は GitHub またはプラットフォームの拡張であり、ここではレンダリングされません。必要なら関連プラグインを設定した Markdown レンダラーを使うか、それらをレンダリングするプラットフォームに出力を貼り付けてください。

HTML をコピーをクリックすると何が起きますか?

レンダリング済みの HTML ソースが Clipboard API を通じてクリップボードに書き込まれます。ラッパーページのクロームなしで HTML が得られ、Markdown を表すタグだけが渡されます。CMS、メールエディター、またはファイルに直接貼り付けてください。ディスクにファイルは作成されません。

テーブルの整列がずれるのはなぜ?

GFM テーブルにはヘッダー行、各列 3 つ以上のハイフンを持つ区切り行、セル間のパイプが必要です。パイプが欠けていたりハイフンが 2 つだけの区切り行だったりすると静かに失敗します。HTML ソース表示に切り替えて実際に <table> が生成されたか確認してください。

ここに貼り付けた Markdown を保存していますか?

いいえ。あなたが入力または貼り付けた Markdown も、ダウンロードしたレンダリング済み HTML も保存しません。タブを閉じるか更新した瞬間にすべて破棄されます — ログもなく、あなたが何を書いたかの記録は私たちの側にありません。気になるならブラウザの DevTools を確認してください。