Markdown プレビューの使い方
- エディタに Markdown を入力または貼り付けます。スマートフォンでは上の切り替えで「編集」と「プレビュー」を切り替えます。
- 改行をそのまま反映したい場合は「1 回の改行でも改行する」にチェックを入れます。
- 「HTML をコピー」で変換後の HTML をコピーし、「.md をダウンロード」「.html をダウンロード」でファイルとして保存できます。
- 入力内容はこのブラウザに自動保存されます。「サンプルを読み込む」で主な書き方の例を確認できます。
Markdown の基本的な書き方
見出しは行頭に #(レベルごとに 1 つずつ、###### まで)を付けます。**アスタリスク 2 つ**で囲むと太字、*1 つ*で斜体、~~チルダ 2 つ~~で取り消し線になります。リンクは [表示する文字](https://example.com)、画像は  と書きます。
箇条書きは行頭に - か *、番号付きリストは 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 ページとして保存できます。
書いた内容は保存されますか?
このブラウザ内にだけ自動保存され、次にページを開いたときに復元されます。「クリア」を押すか、ブラウザのデータを削除すると消えます。
入力した文章はアップロードされますか?
いいえ。変換はすべてブラウザ内で行われ、入力内容がサーバーに送られることはありません。
最終更新: ソースコードを見る