Markdownプレビュー無料・登録不要
Markdown記法で書いたテキストをリアルタイムでHTMLプレビュー。README作成やブログ執筆の確認に最適です。
良いMarkdownプレビューの判断基準
READMEやブログ原稿をMarkdownで書いたとき、「実際にどう表示されるか」をその場で確かめるツールです。プレビューを見たら、下の基準で公開先での見え方まで確認します。
見出し・リストの記法が正しく効いているか
# や - の後ろにスペースが無いと、見出しやリストとして認識されないことがあります。プレビューで地の文のまま表示されている行があったら、記号の後のスペースを疑います。
公開先の方言(対応記法の差)を意識したか
Markdownはサービスごとに対応する記法が異なり、表やチェックボックスなどは拡張記法です。このプレビューはあくまで標準的な表示なので、最終確認は公開先で行います。
コードブロックが閉じているか
```で始めたコードブロックを閉じ忘れると、それ以降の本文が全部コード扱いになります。プレビューの後半がまとめて等幅文字になっていたら、閉じ忘れのサインです。
画像は公開先でも表示される指定か
手元のパソコン内のファイルパスで指定した画像は、公開先では表示されません。Web上のURLか、公開先にアップロードした画像を指定します。
太字・斜体が意図どおり効いているか
* や _ による強調は、前後の文字との位置関係で効かないことがあります。プレビューで記号がそのまま見えていたら、囲み方や前後のスペースを調整します。
機密の文書を貼る前に所属組織のルールを確認したか
社内向けのドキュメントには外に出せない情報が含まれることがあります。外部のツールに貼ってよいか、所属組織のルールを先に確認します。
ありがちな失敗例(NG → 改善)
NG「#見出し」とスペース無しで書いて、見出しにならず地の文として表示される。
改善「# 見出し」のように、# の後に半角スペースを入れて書く。
→ 多くの処理系は # と本文の間のスペースで見出しと判定します。リストの - も同じようにスペースが必要です。
NGコードブロックの ``` を閉じ忘れて、ページの後半が全部コード表示になっている。
改善コードブロックの開始と終了の ``` が対になっているかを確認する。
→ 閉じ忘れの影響はその行だけでなく以降の全文に及びます。後半の表示崩れは、まず閉じ忘れを疑うと早く見つかります。
NGこのツールのプレビューだけで確認して公開し、公開先では表が崩れていた。
改善プレビューは下書きの確認に使い、最後は必ず公開先のプレビュー機能で確認する。
→ Markdownには方言があり、表などの拡張記法は公開先によって対応が異なります。標準的なプレビューは公開先の表示の保証にはなりません。
Markdownプレビューの使い方
- 1Markdown記法で文章を入力します
- 2リアルタイムでプレビューが表示されます
- 3表示結果を確認して問題なければご利用ください
Markdownプレビューの例文・サンプル
Markdownプレビューの例
# タイトル ## サブタイトル - リスト項目1 - リスト項目2 **太字** と *斜体* [リンク](https://example.com)
(プレビュー) ■ タイトル(h1) ■ サブタイトル(h2) ・ リスト項目1 ・ リスト項目2 太字 と 斜体 リンク(→ example.com)
※ コードブロック、テーブル、画像などにも対応
よくある質問
Markdownプレビューは無料ですか?
はい、完全無料でご利用いただけます。会員登録も不要です。
スマートフォンでも使えますか?
はい、スマートフォン・タブレット・PCなど、ブラウザがあればどのデバイスでもご利用いただけます。
入力したコードやデータは安全ですか?
はい、入力データはブラウザ上で処理され、サーバーに送信されません。安心してご利用ください。
📘 関連ガイド記事
関連ツール
Markdownプレビューについて
Markdown プレビューが解決する課題
Markdown は GitHub の README、Notion、Qiita、Zenn など多くのサービスで使われる軽量マークアップ言語です。書いた Markdown が「実際にどう表示されるか」を確認するには、各サービスにコピー&ペーストするしかなく、毎回試行錯誤するのは手間です。本ツールは入力した Markdown 文字列を瞬時にプレビューし、見出し・リスト・リンク・コードブロック・テーブルなどがどう表示されるか即座に確認できます。
こんなシーンで使えます
【1. README ファイルの執筆】GitHub に push する前に、表示されるレイアウトを確認できます。
【2. 技術ブログの執筆】Qiita や Zenn の記事を書く際、表示確認のための環境セットアップなしで即プレビューできます。
【3. Notion / Slack / Discord の記法確認】これらのサービスは Markdown サブセット対応のため、本ツールで先に整形イメージを掴んでおくと、貼り付け後の修正が減ります。
他の方法とこのツールの違い
VSCode の Markdown Preview や、StackEdit などの専用ツールもありますが、ブラウザでサクッと確認したい時にエディタを開くのは手間です。本ツールはブラウザ内で完結し、即座にプレビュー結果が出ます。会員登録もログインも不要です。
よくある失敗と注意点
1つ目の失敗は、サービスごとに Markdown 仕様が微妙に異なることを忘れることです。GitHub Flavored Markdown と CommonMark は仕様が違い、Slack の Markdown は機能が限定されています。本ツールのプレビューはあくまで標準的な表示で、最終的には貼り付け先で確認してください。
2つ目は、画像 URL の動作です。外部 URL の画像は表示されますが、ローカルパスの画像は表示されません。
3つ目は、HTML タグの扱いです。Markdown 内に HTML タグを書ける記法もありますが、サービスによっては禁止されています。