Markdownの表示をその場で確認する使い方｜記法ミスを書きながら防ぐ

Markdown を書くと、右側に表示結果がその場で出ます。見出しやリスト、表もすぐに形になります。

書き間違いに書きながら気づけるので、公開してから直す手間が減ります。入力した文章は外部へ送らず、手元だけで処理します。

Markdownの記法でつまずくところ

Markdown は記号で書式を表すため、細かなずれで表示が崩れます。こんな場面で困りがちです。

• 見出しの # やリストの - が、正しく反映されるか不安
• 表の | の数が合わず、レイアウトが崩れる
• push してからでないと、README の見た目が分からない

Markdownプレビューツールは、この確認を書きながら肩代わりします。

Markdownプレビューツールの使い方

ツールを開くと、左に入力欄、右にプレビューが並びます。

左に Markdown を書くと、右がその場で更新されます。見出し・リスト・表・チェックリストが、実際の見た目で出ます。

下には文字数や行数も表示され、分量の目安になります。

HTMLとして書き出す

「HTMLをコピー」を押すと、変換された HTML を取り出せます。CMS やブログへ、そのまま貼り付けられます。

Markdown をそのまま使えない場所でも、HTML にして持ち込めます。

スマホでも書きながら確認できる

画面が狭いときは、「エディタ」と「プレビュー」をタブで切り替えます。書いた結果を、その場で確かめられます。

移動中の下書きでも、表示の崩れに気づけます。

こんな場面で使える

• ブログ記事の下書き：公開前に、見出しやリストの整形を確かめます。
• GitHubのREADME作成：push する前に、表やコードの表示を見ます。
• メモ・議事録の整形：プレーンなメモを、読みやすい形にします。

使用例

たとえば、README に仕様の表を書く場面を思い浮かべてみます。

左に表の Markdown を書くと、右に表がすぐ出ます。| の数がずれれば、崩れた表示で気づけます。

書きながら直せるので、push 後の手戻りが減ります。

安心して使えるポイント

入力した文章は、どこにも送信されません。すべて手元のブラウザの中だけで変換します。

社内向けのドキュメントも、外に出さずに整えられます。

関連ツール

• Markdownプレビューツール：Markdownの表示をその場で確認
• CSV⇔Markdown表変換ツール：CSVをMarkdownの表に変換する
• テキスト差分比較ツール：修正前後の文章の違いを確認する

補足: 開発者の方へ

Markdown の解析と HTML 変換にはパーサーを使い、GFM（GitHub Flavored Markdown）の表・チェックリスト・取り消し線・自動リンクに対応します。生成した HTML は XSS 対策のサニタイズを通してから表示します。GFM では編集中の改行がそのまま <br> になることが多く、標準 Markdown とは扱いが異なります。他の CMS に貼ると改行の解釈が変わる場合があるため、空行で段落を分けると安全です。

まとめ

Markdown は、記号のずれで表示が崩れやすい書式です。書けばその場で結果が出るので、崩れに書きながら気づけます。

HTML の書き出しにも対応します。まずは Markdown を書いて、表示を確かめてみてください。

Markdownプレビューツールを開く