マークダウンプレビュー・HTML変換・記法ガイド

マークダウンプレビュー・HTML変換・記法ガイドについて

Markdownには唯一の標準がありません。2004年のオリジナル文法は曖昧な部分が多く、パーサーごとに結果が違っていました。それを厳密にまとめたのがCommonMark仕様で、GitHubはそこに表・タスクリスト・取り消し線などを加えたGFM(GitHub Flavored Markdown)を使っています。このツールはCommonMarkとGFMに従うオープンソースのパーサーmarkedで変換し、安全のため生のHTMLだけ扱いを変えています。同じ点と違う点を知っておくと、GitHubやブログに載せたときの崩れを防げます。

このページには、リアルタイムプレビュー、MarkdownとHTMLの相互変換、文法ごとに原文と表示結果を並べる文法ガイドの3つのモードがあります。

生のHTMLは実行されず文字として表示される

CommonMarkは生のHTMLをそのまま通し、安全対策は利用側に任せています。GFMは「許可されない生HTML」拡張で、script、style、iframe、textarea、titleなど一部のタグを無効化します。

このツールはさらに保守的で、パーサーが生のHTMLと判断した部分をすべて&lt; &gt;にエスケープします。そのため<script>alert(1)</script>は実行されず、段落の文字として表示されます。一方で、GitHubでは使える<details>や<kbd>も文字になります。リンクと画像のURLはスキームを確認し、javascript:やvbscript:などは#に置き換えます。

対応する文法と仕様との違い

CommonMarkの文法すべて(ATX・Setext見出し、強調のflankingルール、行末スペース2つやバックスラッシュの強制改行、「5.」「3)」の番号付きリストと開始番号、4スペースのインデントコード、参照リンク、バックスラッシュエスケープ)と、GFM拡張(表と配置、~~取り消し線~~、- [ ]タスク、www.自動リンク)に対応します。snake_case_nameのような単語内のアンダースコアは斜体にならず、…/Foo_(bar)のように括弧を含むURLも最後までリンクになります。仕様と異なる点は次のとおりです。

• 生のHTML:<details>、<kbd>、<!-- コメント -->などのタグは実行も非表示もせず、文字として表示します(上の節を参照)。
• 脚注([^1])、定義リスト、:smile:のような絵文字コード、見出しのアンカーidはGFM仕様外の拡張なので生成しません。
• リンクURL内の日本語や空白は、CommonMarkの参照実装と同じく%E3%81%82のようなパーセントエンコードになります。ブラウザで開くアドレスは同じです。

変換モード:Markdown ↔ HTML

Markdown → HTMLはプレビューと同じレンダラーを使います。取り消し線、タスクリスト、表のセル内の\|までプレビューと同じHTMLになり、ブロックタグの間には読みやすいよう改行が入ります。

HTML → Markdownは見出し、段落、太字・斜体、リンク、画像、入れ子リスト、引用、コードブロック、表、<br>、<hr>を戻します。<del>は~~取り消し線~~に、チェックボックスは[x]・[ ]に戻ります。scriptとstyleは中身ごと削除し、他の知らないタグはタグだけ外して文字を残します。divやsectionなどのブロックタグは前後に空行を入れ、直前のリストの最後の項目に文字がつながらないようにします。属性はすべて消えます。

文法ガイドモード

見出し、段落と改行、強調、リスト、リンクと画像、コード、引用・区切り線・表、エスケープとインラインHTMLまでを項目ごとに示します。結果は仕様どおりのHTMLで、ほとんどはプレビューと同じです。脚注、定義リスト、絵文字コード、見出しid、インラインHTML、コメントなど、このツールが生成しない文法はGitHubなどでの結果を別途書いて表示するため、これらの項目はガイドとプレビューで結果が異なります。

例

使い方

1. タブでプレビュー、変換、文法ガイドを選びます。
2. 左にMarkdown(またはHTML)を入力すると右の結果がすぐ変わります。
3. 結果のHTMLやMarkdownをコピーします。

よくある質問