Markdown HTML変換
Markdownの「# Hello」は <h1>Hello</h1>、「**bold**」は <strong>bold</strong>、「[text](https://example.com)」は <a href="https://example.com">text</a> になります。
使い方
- 入力欄にMarkdownを書くか貼り付けます。最初はサンプルが入っているので、すぐに結果を確認できます。
- 「プレビュー」で表示結果を、「HTML」でソースコードを切り替えて確認します。
- 「HTMLをコピー」でソースをコピーします。入力するたびに結果は更新されます。
- 出どころのわからない文章では「生のHTMLを許可」をオフのままにしてください。Markdown内のHTMLタグを出力に残したいときだけオンにします。どちらでもプレビューは常にサニタイズされます。
計算方法
変換は2段階です。対応している範囲ではCommonMarkの規則に従います。まず文章を見出し、段落、リスト、引用、コードブロック、水平線といったブロックに分け、次に各ブロックの中の強調、コード、リンク、画像を読み取ります。
対応: #見出しと下線式の見出し、段落と改行、*斜体*と**太字**、`インラインコード`、フェンスとインデントのコードブロック、>引用、入れ子の箇条書きと番号付きリスト、[リンク](url "title")、、<https://...>形式の自動リンク、参照リンク、---の水平線。非対応: 表、脚注、タスクリスト、取り消し線。これらはCommonMarkではなくGitHub独自の拡張です。
安全対策は2重です。標準ではMarkdown内のHTMLはエスケープされ、<script>はただの文字として表示されます。リンクと画像のURLも検査し、リンクはhttp、https、mailto、tel、画像はhttpとhttpsだけを通すので、javascript:やdata:は取り除かれます。さらにプレビュー描画の前に、許可リスト方式のフィルターで既知のタグと属性だけを残し、on*イベントハンドラーやstyle属性はすべて削除します。
プレビュー内のリンクはrel="noopener noreferrer nofollow"付きの新しいタブで開きます。コピーされるHTMLはこれらを含まない変換結果そのままです。
Markdown記法チートシート
| 入力 | 表示 | HTML |
|---|---|---|
| # 見出し | 見出し1 | <h1> |
| **太字** | 太字 | <strong> |
| *斜体* | 斜体 | <em> |
| `code` | コード | <code> |
| - 項目 | 箇条書き | <ul><li> |
| 1. 項目 | 番号付きリスト | <ol><li> |
| > 引用 | 引用ブロック | <blockquote> |
| [text](url) | リンク | <a href> |
|  | 画像 | <img> |
| --- | 水平線 | <hr /> |
よくある質問
信頼できないMarkdownをプレビューしても安全?
安全です。文中のHTMLは標準でエスケープされ、危険なリンクのスキームは削除され、表示前にもう一度フィルターを通します。スクリプトやイベントハンドラーは動きません。ただしリンクした画像は、その画像のサーバーから読み込まれます。
HTMLタグが文字のまま表示されます
「生のHTMLを許可」がオフなので、意図的にエスケープしています。オンにするとタグがそのままHTML出力に入ります。プレビューではscriptタグなど危険なものは引き続き取り除かれます。
表やタスクリストは使えますか?
使えません。表、タスクリスト、脚注、取り消し線はGitHub Flavored Markdownの追加機能です。このツールはCommonMarkの基本機能を扱います。
段落の途中で改行するには?
行末に半角スペースを2つ入れるか、バックスラッシュを置きます。CommonMarkと同じく、単独の改行はスペース扱いになります。
アスタリスクやアンダースコアをそのまま表示したい
\* や \_ のように前にバックスラッシュを付けます。インラインコードやコードブロックの中ではエスケープ不要です。
入力した文章はアップロードされますか?
いいえ。変換もプレビューもブラウザ内で行います。