Markdown プレビュー

使い方

1. 左側のエディタにMarkdownを入力します。
2. 右側にリアルタイムでHTMLプレビューが表示されます。
3. HTML をコピーで生成されたHTMLをコピーします。
4. クリアでエディタを空にします。

Markdownについて

Markdownは2004年にJohn Gruberが作成した軽量マークアップ言語です。読みやすいプレーンテキストでHTMLコンテンツを作成でき、README、ドキュメント、ブログ記事などで広く使われています。

レンダラー

プレビューは micromark 4 と micromark-extension-gfm 3 を使います。micromark は CommonMark に完全準拠し仕様のテストに通るとしています。GFM 拡張は GFM 仕様 のうち GitHub が使う 5 つの機能（テーブル、タスクリスト、打ち消し線、自動リンク、脚注）を加えます。プレビュー内のリンクは新しいタブで開くので、クリックしても書きかけの内容は消えません。

例

次の入力：

# Release notes

See https://example.com and `a **b** c`.

- Parent
  - Child
- [X] Done
- [x] done

3. third
4. fourth

| Item | Price |
|:-----|------:|
| Widget | $9.99 |
| a \| b | 1 |

<b>raw</b> and <img src=x alt=y>

から生成される HTML（「HTML コピー」の内容）：

<h1>Release notes</h1>
<p>See <a href="https://example.com">https://example.com</a> and <code>a **b** c</code>.</p>
<ul>
<li>Parent
<ul>
<li>Child</li>
</ul>
</li>
<li><input type="checkbox" disabled="" checked="" /> Done</li>
<li><input type="checkbox" disabled="" checked="" /> done</li>
</ul>
<ol start="3">
<li>third</li>
<li>fourth</li>
</ol>
<table>
<thead>
<tr>
<th align="left">Item</th>
<th align="right">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Widget</td>
<td align="right">$9.99</td>
</tr>
<tr>
<td align="left">a | b</td>
<td align="right">1</td>
</tr>
</tbody>
</table>
<p>&lt;b&gt;raw&lt;/b&gt; and &lt;img src=x alt=y&gt;</p>

1 行ずつ見ると、裸の URL はリンクになり（GFM の自動リンク）、バッククォート内のアスタリスクはそのまま残ります（コードは強調として解析されません）。インデントした - Child は入れ子のリスト、[X] と [x] はどちらもチェック済みのタスクです。3. から始まるリストは開始番号が start 属性に入ります。区切り行のコロンで左寄せ・右寄せが決まり、\| はセル内の縦棒としてセルを分割しません。最後の行の生の HTML は文字として出力されます。

生の HTML は文字として表示

CommonMark では Markdown に HTML タグを書けます。GitHub はその一部をフィルターしたうえで表示し、レンダリングの流れで script タグ、インラインスタイル、class / id 属性を取り除きます。このプレビューはより厳しい方法を取り、生の HTML をすべてエスケープします（micromark の既定の動作）。理由はプレビューが動く場所です。zerotool.dev では他のツールが入力をブラウザのストレージに保存しており、同じオリジンのページから読めます。生の HTML を描画すると、貼り付けたテキストの <img src=x onerror=…> がこのサイトでスクリプトとして実行されます。エスケープすれば、テキスト内のマークアップがページの要素になることはなく、コピーした HTML を別のページに貼っても安全です。

URL も同様です。リンクは相対 URL と http、https、mailto、irc、ircs、xmpp、画像は相対 URL と http、https だけを残し、javascript: や data: などは href / src が空になります（リンクの文字は残ります）。<details>、<kbd>、<br> を効かせたい文書は GitHub 自身のプレビューで確認してください。

画像はネットワークから読み込まれる

![alt](https://…) は <img> になり、ブラウザがその URL から画像を取得します。画像のサーバーには IP アドレスとブラウザの情報が伝わります。テキストや文書の残りはブラウザ内にとどまります。

制限

• 生の HTML は描画しないため（上記）、HTML タグに頼る文書は GitHub と表示が異なります。
• 見出しに id のアンカーは付きません（GitHub はページ表示時に付けます）。
• :tada: のような絵文字ショートコード、@メンション、#123 のような Issue 参照は GFM 仕様外の GitHub の機能で、文字のまま表示されます。
• 数式（$…$）と Mermaid の図は描画しません。
• コードブロックのハイライト対象は JavaScript、TypeScript、Python、Go、PHP、Ruby、Java、Bash、JSON、HTML/XML、CSS、Markdown です。それ以外は通常のコードとして表示します。