Markdown プレビュー

左に Markdown を書くと、右側にリアルタイムでプレビューが表示されます。GitHub Flavored Markdown に対応し、変換した HTML のコピーやファイルとしての保存もできます。

プレビュー

読み込み中…

Markdown プレビューの使い方

  1. エディタに Markdown を入力または貼り付けます。スマートフォンでは上の切り替えで「編集」と「プレビュー」を切り替えます。
  2. 改行をそのまま反映したい場合は「1 回の改行でも改行する」にチェックを入れます。
  3. 「HTML をコピー」で変換後の HTML をコピーし、「.md をダウンロード」「.html をダウンロード」でファイルとして保存できます。
  4. 入力内容はこのブラウザに自動保存されます。「サンプルを読み込む」で主な書き方の例を確認できます。

Markdown の基本的な書き方

見出しは行頭に #(レベルごとに 1 つずつ、###### まで)を付けます。**アスタリスク 2 つ**で囲むと太字、*1 つ*で斜体、~~チルダ 2 つ~~で取り消し線になります。リンクは [表示する文字](https://example.com)、画像は ![代替テキスト](image.png) と書きます。

箇条書きは行頭に - か *、番号付きリストは 1. を付け、半角スペース 2 つでインデントすると入れ子になります。引用は >、インラインコードはバッククォート 1 つ、コードブロックは前後をバッククォート 3 つの行で囲みます。```js のように言語名を添えることもできます。

改行がうまくいかないときは

日本語で Markdown を書くときにいちばん戸惑うのが改行です。標準の Markdown では、段落の中で 1 回改行しただけでは改行されず、前の行とつながって表示されます。段落を分けたいときは空行を 1 行入れ、段落の途中で改行したいときは行末に半角スペースを 2 つ入れるか、バックスラッシュを置きます。

GitHub の Issue やコメント欄、Slack、Qiita などは 1 回の改行でもそのまま改行される設定になっています。同じ表示で確認したい場合は「1 回の改行でも改行する」をオンにしてください。GitHub の README は標準ルールなので、README を書くときはオフのままにします。

GitHub Flavored Markdown(GFM)の表とタスクリスト

このエディタは GitHub や GitLab、Qiita、Zenn などで広く使われている GitHub Flavored Markdown に対応しています。標準の Markdown に加えて、表、タスクリスト(- [ ] と - [x])、取り消し線、URL の自動リンクが使えます。

表は見出し行、ハイフンの区切り行、データ行の順に書き、セルを | で区切ります。区切り行にコロンを付けると配置を指定でき、:--- で左寄せ、:---: で中央、---: で右寄せです。金額や数値の列は右寄せにすると読みやすくなります。

出力される HTML の安全性

Markdown には HTML をそのまま書けるため、スクリプトが紛れ込む可能性があります。このツールはプレビューの前に DOMPurify で出力を無害化し、スクリプトやイベント属性などの危険な要素を取り除きます。コピーやダウンロードされる HTML も無害化済みのものです。

処理はすべてブラウザ内で完結し、入力した文章がサーバーに送信されることはありません。ダウンロードした .html ファイルはライト・ダークモードに対応した簡単なスタイル付きの完結したページなので、そのまま開いたり印刷したりできます。

よくある質問

改行したのにプレビューでつながってしまうのはなぜですか?

標準の Markdown では、段落内の 1 回の改行は改行として扱われないためです。段落の間に空行を入れるか、行末に半角スペースを 2 つ入れてください。「1 回の改行でも改行する」をオンにする方法もあります。

GitHub の README をプレビューできますか?

はい。README.md の内容を貼り付ければ、表やタスクリスト、コードブロックなどが GitHub とほぼ同じように表示されます。ただし Mermaid の図や GitHub 独自の注意書き(alert)、絵文字のショートコードには対応していません。

Markdown で表を作るには?

| 名前 | 価格 | のような見出し行の下に | --- | ---: | という区切り行を書き、その下に 1 行ずつデータを書きます。「サンプルを読み込む」で実際の表を確認できます。

Markdown を HTML に変換するには?

Markdown を入力して「HTML をコピー」を押すと、変換後の HTML がコピーされます。「.html をダウンロード」なら、ブラウザでそのまま開ける Web ページとして保存できます。

書いた内容は保存されますか?

このブラウザ内にだけ自動保存され、次にページを開いたときに復元されます。「クリア」を押すか、ブラウザのデータを削除すると消えます。

入力した文章はアップロードされますか?

いいえ。変換はすべてブラウザ内で行われ、入力内容がサーバーに送られることはありません。

最終更新: ソースコードを見る