Markdownプレビューツール
Markdown形式のテキストを入力するだけで、見出し・リスト・表・コードブロックなどの表示がリアルタイムで確認できます。README作成やブログ記事の下書きに。
最終更新：2026年9月9日 ／ 運営：sesebox（運営者情報）
見出し1
見出し2
これは 太字 と 斜体 のサンプルです。
- リスト項目1
- リスト項目2
- ネストした項目
- 番号付きリスト
- 2番目の項目
引用文のサンプルです。
ShibaHub へのリンクと、インラインコード の例。
console.log("Hello, ShibaHub!");
| 項目 | 値 |
|---|---|
| A | 1 |
| B | 2 |
見出し（#）・強調（**太字**・*斜体*）・リスト・引用（>）・リンク・コード（`インラインコード` や```で囲むコードブロック）・テーブルなどのMarkdown記法に対応しています。入力した内容はブラウザ内のみで処理され、サーバーに送信されることはありません。
① このツールの使い方
左側の入力欄にMarkdown形式で文章を書くと、右側にその見た目がリアルタイムで表示されます。最初からサンプルのMarkdownが入っているので、記法ごとにどんな見た目になるかをすぐに確認できます。
GitHubのREADME、ブログ記事の下書き、Slack・Discordなどのメッセージ用にMarkdownを書く際、実際にどう表示されるかを確認しながら書き進められます。
② 対応している記法
| 記法 | 書き方の例 | 表示 |
|---|---|---|
| 見出し | # 見出し1 〜 #### 見出し4 | 大きさの異なる見出し |
| 強調 | **太字** ・ *斜体* | 太字・斜体の文字 |
| リスト | - 項目 ／ 1. 項目 | 番号なし・番号付きリスト（ネスト可） |
| 引用 | > 引用文 | 左に線が入った引用ブロック |
| リンク | [表示名](URL) | クリックできるリンク |
| コード | `インラインコード` ／ ```コードブロック``` | 等幅フォントで表示 |
| 表 | | 見出し | 見出し | | GFM形式の表（罫線付き） |
| 区切り線 | --- | 水平線 |
表（テーブル）の記法は、GitHubなどで使われる拡張仕様（GFM＝GitHub Flavored Markdown）に対応しているため、GitHub上での見た目に近い形で確認できます。
③ HTMLタグを直接書いた場合の扱い
セキュリティ上の理由から、Markdown内に直接<script>や<div>のようなHTMLタグを書いても、それらはHTMLとして解釈・実行されず、そのままテキストとして表示されます。多くのMarkdownエディタは生のHTMLを許可する設定を持っていますが、このツールは安全性を優先し、Markdown記法だけをレンダリングする仕様にしています。
④ コードブロックの言語指定について
コードブロックの先頭で```jsのように言語名を指定すると、その言語であることを示すクラスが付与されます。ただし現時点ではシンタックスハイライト（キーワードごとの色分け表示）までは行っていないため、言語を指定してもしなくても見た目そのものは変わりません。コードの構造（インデントや改行）を崩さずに表示したいときに使う機能とお考えください。
⑤ 実務での使いどころ
GitHubにプルリクエストやREADMEを書く際、見出しの階層やリストのネストが意図通りになっているかを、GitHub上にプッシュする前にこのツールで確認しておくと手戻りが減ります。特に表（テーブル）は、区切り線「|」の数がずれると崩れて表示されることがあるので、投稿前のチェックに向いています。また、技術記事やドキュメントをMarkdownで書く文化のチーム・ブログサービス（Qiitaやはてなブログなど）に投稿する前の下書き確認にも使えます。
入力したテキストの処理はすべてブラウザ内のJavaScriptで行われ、サーバーに送信されたり保存されたりすることはありません。
Markdownの基本的な記法や成り立ちについてはMarkdownの基礎を解説した記事でも取り上げています。
⑥ ネストしたリストの書き方でつまずきやすい点
箇条書きの中にさらに箇条書きを入れる「ネストリスト」は、Markdownの中でも特につまずきやすい記法です。子リストの行頭に半角スペースを2つ（もしくは4つ、サービスによって異なります）入れてからハイフンを書く必要があり、スペースの数が足りないと親リストと同じ階層として扱われてしまいます。このツールでプレビューを見ながら、スペースの数を1つずつ調整して意図通りの階層になっているかを確認すると、実際にGitHubやブログに投稿してからレイアウトが崩れているのに気づく、という手戻りを防げます。
⑦ リンク・画像記法で間違えやすいポイント
リンクは[表示名](URL)、画像は先頭に!を付けてと書きますが、この2つはよく混同されます。画像のつもりで!を書き忘れると、画像が表示されずリンクとして表示されてしまいます。逆にリンクのつもりで!を付けてしまうと、意図しない画像埋め込み扱いになります。角括弧と丸括弧の間にスペースを入れてしまうと正しく認識されないことも多いため、うまく表示されない場合はまずこの2点を確認してみてください。また、URLの中に日本語や記号が含まれていると意図通りにリンクされないことがあるため、URLは基本的に半角英数字と一部の記号だけで構成されたものを使うのが安全です。画像URLが正しくても表示されない場合は、画像自体が非公開設定になっていたり、リンク切れになっていたりすることも多いので、プレビューで確認しながら1つずつ原因を切り分けるとよいでしょう。特に社内ネットワーク限定の画像URLは、外部からは表示できないことがある点にも注意してください。
⑧ サービスによって記法の解釈が微妙に違う（方言の存在）
Markdownには唯一の統一仕様があるわけではなく、GitHubの「GFM（GitHub Flavored Markdown）」、技術記事サービスの独自記法、標準化を目指した「CommonMark」など、いくつかの方言（バリエーション）が存在します。たとえば表（テーブル）の記法や、改行の扱い（1回の改行を反映するか、空行が必要か）はサービスによって異なることがあります。このツールはGFMに近い挙動でプレビューしますが、投稿先が別のMarkdown実装を使っている場合は、実際の投稿画面でも見た目を確認することをおすすめします。特に改行の扱いは方言差が出やすく、思った位置で改行されない場合は、投稿先のヘルプページで仕様を確認すると原因が特定しやすくなります。
Markdownプレビューツールは何に使えますか？
GitHubのREADMEやブログ記事、Slack・Discordなどのメッセージ用にMarkdown形式で文章を書く際、見出しやリスト、表、コードブロックなどが実際にどのように表示されるかをその場で確認できます。
どのようなMarkdown記法に対応していますか？
見出し（# ～ ####）、強調（**太字**・*斜体*）、リスト（番号付き・番号なし、ネスト）、引用（>）、リンク、インラインコードとコードブロック（```）、区切り線（---）、表（GFM形式の | で区切るテーブル）に対応しています。
プレビューにHTMLタグを直接書くとどうなりますか？
セキュリティ上の理由から、Markdown内に直接記述したHTMLタグはそのままテキストとして表示され、HTMLとして解釈・実行されることはありません。
コードブロックに言語名を指定するとどうなりますか？
\`\`\`js のように言語名を指定すると、コードブロックにその言語であることを示すクラスが付与されますが、現時点ではシンタックスハイライト（色分け表示）は行われません。
入力したテキストはサーバーに送信されますか？
いいえ。プレビューの生成はすべてブラウザ内のJavaScriptで行われ、入力したテキストがサーバーに送信されたり保存されたりすることはありません。