文字数・バイト数カウント【無料・登録不要】UTF-8・Shift_JIS・UTF-16のバイト数と表せない文字の場所を表示
engblog-poster
ENG LIFE BLOG
Markdownプレビュー【無料・登録不要】入力と同時に表示・HTML変換｜表・コードブロック対応
engblog-poster
Markdown（マークダウン）を入力すると、すぐ横にプレビューを表示する無料ツールです。見出し・リスト・表・コードブロック・リンク・引用などに対応していて、README やメモ、ブログの下書きを書きながら、仕上がりを確かめられます。変換した結果を HTML としてコピーしたり、.md ファイルを読み込んだりすることもできます。
入力した内容はお使いのブラウザの中だけで処理され、サーバーには一切送信されません。また、入力に HTML のタグ（<script> など）が書かれていても実行せず、文字のまま表示する安全な作りにしています。
Markdown ファイル（.md）をここにドラッグ＆ドロップ（5MB まで）
プレビュー
生成された HTML を表示する
入力した Markdown はお使いのブラウザ内だけで処理されます。サーバーへの送信や保存は一切行いません。入力に書かれた HTML のタグ（<script> など）は実行せず、文字のまま表示します。
使い方
Markdown をプレビューする
- 「Markdown」の欄に文章を入力するか、貼り付けます。
- 入力と同時に、「プレビュー」の欄に表示が反映されます。パソコンなど画面が広いときは左右に、スマートフォンなど画面が狭いときは上下に並びます。
- プレビューの下に、見出し・リンク・表・コードブロックの数が表示されます。
試しに使ってみたいときは、「サンプルを入れる」を押してください。よく使う書き方をひととおり入れた例が表示されます。
改行の扱いを切り替える
Markdown の決まりでは、文章の途中で 1 回改行しても、表示では改行されません（前の行とつながって 1 つの段落になります）。表示でも改行したいときは、行の最後に半角スペースを 2 つ入れるか、行の最後に「\」を書きます。
GitHub では、.md ファイルはこの決まりどおりに表示されますが、Issue・プルリクエスト・ディスカッションでは、入力した改行がそのまま改行として表示されます。オプションの「改行をそのまま改行として表示する」にチェックを入れると、後者と同じ表示になります。
HTML をコピー・保存する
- 「HTML をコピー」を押すと、プレビューの内容を HTML にしたものがコピーされます。ブログの記事やメールの本文に貼るときに使えます。
- 「HTML ファイルとして保存」を押すと、ブラウザで開ける 1 つの HTML ファイル（markdown.html、文字コードは UTF-8）として保存されます。
- 「生成された HTML を表示する」を開くと、コピーされる HTML の中身を確認できます。
Markdown ファイルを読み込む
点線の枠に .md ファイルをドラッグ＆ドロップするか、「ファイルの選択」から選びます（5MB まで）。文字コードは、UTF-8・Shift_JIS・UTF-16 を自動で判定します。
Markdownとは？
Markdown は、「#」や「*」などの記号を使って、見出しや箇条書きといった文章の構造を書き表す書き方です。2004 年に John Gruber 氏が公開しました。作者のサイトでは、いちばんの設計目標は「できるだけ読みやすいこと」で、記号を付けたままの文字だけの状態でも、タグだらけに見えずにそのまま読める形を目指したと説明されています。
HTML に比べて書くのが簡単で、文字だけのファイルとして残せるため、エンジニアの間では次のような場面で広く使われています。
- GitHub などのリポジトリに置く README.md（ソフトウェアの説明書）
- Issue やプルリクエストのコメント
- 技術ブログや社内 Wiki、設計メモ
- チャットツールでのメッセージ（一部の記法に対応しているもの）
CommonMark と GFM
最初の Markdown は細かい決まりがあいまいだったため、ツールによって表示が少しずつ違うという問題がありました。そこで、決まりを細かく定めた仕様として作られたのが CommonMark です。さらに GitHub は、CommonMark に表・取り消し線・タスクリストなどを加えた GFM（GitHub Flavored Markdown）を定めています。GFM の仕様では、GFM は CommonMark を完全に含む（CommonMark の書き方はすべてそのまま使える）と説明されています。
このツールは、CommonMark（バージョン 0.31.2）と GFM の主な書き方に沿って表示します。
Markdown の書き方早見表
よく使う書き方をまとめました。左の列をこのツールに貼ると、表示を確かめられます。
| やりたいこと | 書き方 | 補足 |
|---|---|---|
| 見出し | # 見出し1 ## 見出し2 ### 見出し3 | 「#」の数が見出しの大きさ（1〜6）。「#」の後ろに半角スペースが必要 |
| 太字 | **太字** | __太字__ でもよい |
| 斜体 | *斜体* | _斜体_ でもよい（日本語の途中では「*」のほうが確実） |
| 取り消し線 | ~~取り消し~~ | GFM の書き方 |
| 箇条書き | – 項目 – 項目 | 「*」や「+」でもよい。行頭に半角スペースを入れると入れ子になる |
| 番号付きリスト | 1. 項目 2. 項目 | 「1)」でもよい。最初の番号から順に振られる |
| タスクリスト | – [ ] まだ – [x] 完了 | GFM の書き方。このツールでは ☐ ☑ の記号で表示 |
| リンク | [表示する文字](https://example.com) | URL をそのまま書いても自動でリンクになる |
| インラインコード | `コード` | 文の中の短いコードやコマンド名に |
| コードブロック | “` コード “` | 「“`」の行で挟む。「“`bash」のように言語名を書いてもよい |
| 引用 | > 引用文 | 「> >」で引用の中に引用 |
| 表 | | 列1 | 列2 | | — | — | | a | b | | GFM の書き方。2 行目の「:—」で左寄せ、「:—:」で中央、「—:」で右寄せ |
| 水平線 | — | 「***」や「___」でもよい |
| 改行 | 行末に半角スペース 2 つ | 行末に「\」でもよい |
| 記号をそのまま表示 | \* | 記号の前に「\」を付けると、記号の意味がなくなる |
段落と段落の間、見出しや表の前後には、空の行を 1 行入れておくと、意図しないつながり方を防げます。
このツールの安全対策
Markdown のプレビューは、入力された文字を Web ページの表示に変える処理なので、作り方によっては、悪意のある入力でブラウザにプログラムを実行させられてしまう危険があります（クロスサイトスクリプティング、XSS と呼ばれる攻撃です）。このツールでは、次のように対策しています。
- 入力に書かれた HTML は、タグとして扱わず文字のまま表示します。<script> や、画像の読み込みに失敗したときに命令を実行させるような書き方も、ただの文字として表示されるだけで、何も実行されません。
- Markdown の解析は、このツール専用に作ったプログラムで行い、HTML の文字列を組み立ててブラウザに解釈させることはしません。見出し・段落・リスト・表などの決まった種類の部品だけを 1 つずつ作り、文字は「文字として」入れています。
- リンクは http:// と https:// で始まるものだけを有効にします。JavaScript を実行させる URL（javascript スキーム）や、data スキーム、相対パスなどはリンクにせず、URL を文字で表示します。表示したリンクは新しいタブで開き、リンク先に元のページの情報を渡さない設定（rel=”noopener noreferrer nofollow”）を付けています。
- 画像は読み込みません。画像の読み込みは外部のサーバーとの通信になり、閲覧したことを相手に知られる原因にもなるためです。画像の書き方（）は、説明の文字と URL を文字で表示します。
- 「HTML をコピー」で出力する HTML も、プレビューに使った部品から、決まった種類のタグと属性だけを書き出して作っています。文字の中の「&」「<」「>」「”」「’」は、すべて文字実体参照（< など）に置き換えます。
なお、プレビューを sandbox 付きの iframe（ページの中に別のページを隔離して表示する仕組み）に入れる方法もありますが、このツールはそもそも入力を HTML として解釈しないため、iframe で隔離しなくても安全に表示できます。そのため、iframe は使っていません。
対応している書き方・していない書き方
| 書き方 | このツールでの表示 |
|---|---|
| 見出し（# と、=== / — の下線）、段落、強調、取り消し線、箇条書き・番号付きリスト（入れ子）、コードブロック（“` と字下げ）、インラインコード、リンク（参照リンクを含む）、自動リンク、引用（入れ子）、表、水平線、改行、「\」によるエスケープ | CommonMark・GFM に沿って表示 |
| タスクリスト | チェックボックスの代わりに ☐ ☑ の記号で表示 |
| 画像 | 読み込まず、説明と URL を文字で表示 |
| http / https 以外のリンク（mailto、相対パスなど） | リンクにせず、URL を文字で表示 |
| HTML のタグ | 文字のまま表示（実行しない） |
| 文字実体参照（& など） | よく使う名前のものと、数値で書いたもの（あ など）は文字に変換。それ以外は書いたとおりに表示 |
| 脚注・数式・図（Mermaid など）・コードの色分け | 対応していない（文字のまま表示） |
引用やリストの入れ子は 32 段まで扱います。それより深いものや、とても大きな入力でも、ツールが止まらないようにしています。
よくある質問
入力したデータは保存されませんか？
保存されません。変換はすべてお使いのブラウザの中で行われ、サーバーへの送信も保存も行いません。ページを閉じると入力内容は消えます。とはいえ、パスワードやアクセスキーなどの秘密の情報は、どのツールであっても貼り付けないようにするのが安全です。
悪意のある Markdown を貼っても大丈夫ですか？
大丈夫です。入力に書かれた HTML のタグは文字として表示されるだけで、実行されません。また、JavaScript を実行させるリンクや、外部の画像の読み込みも行いません。他の人から受け取った .md ファイルの中身を確かめるときにも使えます。
Markdown の中に書いた HTML を表示に反映したいのですが？
このツールでは、安全のため HTML のタグは反映せず、文字のまま表示します。GitHub などでは一部の HTML のタグが反映されるため、HTML を含む README は、このツールと表示が異なります。
GitHub と表示がまったく同じになりますか？
文章の構造（見出し・リスト・表など）は、GitHub が使っている GFM の決まりに沿って表示するので、ほぼ同じになります。ただし、文字の大きさや色などの見た目、画像、HTML のタグ、絵文字の書き方（:smile: など）、見出しへのリンクなどは、GitHub と異なります。
どのくらい大きなファイルまで扱えますか？
ファイルの読み込みは 5MB までです。大きな文章を入力しているときは、表示の更新が入力から少し遅れて行われます。
関連する記事・ツール
- HTML エスケープ・アンエスケープツール
- Gitコマンド検索【無料・登録不要】やりたいことから探せるGitコマンド辞典｜取り消し・ブランチ・push
- テキスト差分比較ツール
- JSON整形ツール【無料・登録不要】インデント・圧縮・構文チェック｜エラー箇所を日本語で表示
- 文字コードとは？UTF-8・Shift_JIS・EUC-JPの違いと文字化けの原因・直し方
ABOUT ME
エンジニアとして働いている hr です。仕事や資格勉強で「こんなツールがあれば」と感じたものを、無料Webツールと解説記事にして発信しています。
