Markdown オンラインプレビュー

Markdown プレビューツールの説明

Markdown は文書、説明、README を書くのに最も気楽な形式です。プレーンテキストで、編集しやすく、バージョン管理にも向いています。ただし書いている時点では仕上がりが見えません。このツールがその 1 工程を補います。左で打ち、右で確認。

対応している構文

• 見出し：行頭に # を 1〜6 個で H1〜H6 になります。# のあとに半角スペースが必要で、ないと反映されません。
• 強調：*斜体*、**太字**、***太字斜体***、~~取り消し線~~。
• リスト：- か * で始めると箇条書き、1. で始めると番号付き。前に半角スペース 4 つかタブ 1 つで入れ子にできます。
• タスクリスト：- [ ] 未完了 と - [x] 完了 はチェックボックスとして描画されます。
• 表：セルを縦線で区切り、2 行目に --- を置いてヘッダーを指定し、コロンで揃え方を制御します。
• コード：インラインはバッククォートで囲み、複数行はバッククォート 3 つで囲みます。後ろに言語名を書けます。
• 引用：行頭に >。引用を入れ子にもできます。
• リンクと画像：[テキスト](URL) と ![説明](URL)。
• 区切り線：-、*、_ のいずれかを 3 つ以上、単独の行に書きます。

表の書き方

表は Markdown で最も書き間違えやすい部分です。形式は次のとおりです。

| 名前 | 部署 | 金額 |
|:-----|:----:|-----:|
| 山田 | 技術 | 1200 |
| 佐藤 | 市場 | 980  |

要点は 3 つです。ヘッダー行と区切り行はどちらも必須。区切り行のコロンで揃え方が決まる（左にコロンで左揃え、両側なら中央、右にコロンで右揃え）。各行の縦線の数は揃えるのが望ましく、省略しても描画はされますが、揃えておくとソースが読みやすくなります。

コードブロックの言語指定

バッククォート 3 つの後ろに言語名（```javascript など）を書くと、多くのエディタがシンタックスハイライトを行います。本ツールは言語名に応じた見た目のヒントを出しつつ、元のテキストはそのまま保持するので、別の場所へコピーしても崩れません。

注意点として、コードブロックの中身は Markdown として解析されません。ですからコードブロック内に # やアスタリスクを書いても安全で、見出しや斜体になることはありません。エラーログや設定ファイルを貼るときは必ずコードブロックに入れるべきなのは、このためです。

改行という最大の落とし穴

標準の Markdown では、単独の改行は改行として反映されません。空行を 1 行入れてはじめて新しい段落になり、行末に半角スペース 2 つを置くと強制改行になります。中国語や日本語で書くときは特に扱いにくく、つい改行してしまいます。

そこで本ツールは既定で「単独の改行も改行として扱う」をオンにしており、直感に合う挙動になっています。標準に厳密に従った文書を作りたい場合（一部の静的サイトジェネレーターに通す場合など）は、このチェックを外してください。

どんなときに Markdown を使うか

• 向いている：技術文書、README、議事録、要件定義、ブログの下書き、ノート。内容が主で体裁が従で、長く保守していくもの全般。
• あまり向かない：細かい組版、図と文の混在、多段組が必要な正式文書。こうした用途は従来のワープロソフトのほうが直接的です。

書き出しと移行

出口は 3 つ用意しています。

• Markdown をコピー：プレーンテキストのソースが得られ、Markdown に対応した場所ならどこへでも貼れます。
• HTML をコピー：描画後の HTML 断片が得られ、自分のページにそのまま埋め込めます。スタイルシートは含まないので、見栄えを整えるには CSS を自分で足してください。
• .md をダウンロード：ファイルとして保存でき、バージョン管理やアーカイブに便利です。

処理はすべてブラウザ内で完結し、書いた内容が端末の外に出ることはありません。確認したいときは F12 で Network パネルを開いてください。入力中に要求は 1 件も発生しません。

関連ツール