Markdown リアルタイムプレビュー
左側にMarkdownを書くと、右側に描画結果がそのまま表示されます。HTMLのコピーやダウンロードも可能です。解析はすべてブラウザ内で行われ、内容がアップロードされることはありません。
Markdownをオンラインでプレビューするには？
オンラインのプレビューツールにMarkdownを貼り付けると、入力しながらHTMLとして描画されます。インストールも登録も不要です。GitHub Flavored Markdown対応なら、見出しや強調、ハイライト付きコードブロック、表、タスクリスト、LaTeX数式まで再現でき、生成されたHTMLもコピーできます。
# 見出し
**太字**、*斜体*、`インラインコード`。
- リスト項目
- [リンク](https://example.com)
| 列名 | 値 |
| ---- | -- |
| 行 | 1 |レベル1の見出し、太字と斜体と等幅コードを含む段落、クリックできるリンク付きの箇条書き、そして見出し行を持つ2列の表として描画されます。
Markdown リアルタイムプレビューを使う
Markdown
プレビュー
Markdown プレビュー
MDUtil のMarkdownリアルタイムプレビューへようこそ！
主な機能
- Markdownをリアルタイムに描画
- コードのシンタックスハイライト
- 表やリストなどの要素に対応
- HTMLコードをワンクリックで書き出し
- LaTeX数式に対応
- Word文書として書き出し
コード例
function greet() {
console.log("Hello, world!");
}
表の例
ヒント：左側でMarkdownを編集すると、右側のプレビューがリアルタイムに更新されます。
数式の例
- 二次方程式の解の公式：
- 質量とエネルギーの等価性：
画像の例
GitHub Flavored Markdown
このプレビューツールはGitHub Flavored Markdown（GFM）に対応しています。
- タスクリスト
- 完了したタスク
- 未完了のタスク
- 打ち消し線：
打ち消し線 - 絵文字：:rocket: :smile: :+1:
- Issueやユーザー名の自動リンク
プレビューが描画できるMarkdown記法
プレビュー面はGitHub Flavored Markdownのパーサーを使っているため、ここでの見え方はGitHubやGitLab、主要な静的サイトジェネレーターが公開する結果とほぼ同じです。ファイルをコミットする前に、次の記法を確認しておくと安心です。
見出し・強調・リスト
CommonMarkの基本部分です。リストの前には空行を入れ、#のあとには必ず半角スペースを置きます。見出しがただの文章として表示される原因は、ほぼこのスペース抜けです。
# ドキュメントのタイトル
## セクション
本文は**太字**、*斜体*、***その両方***にできます。
1. 番号付きリスト
2. 2つめの項目
- 入れ子の箇条書きh1とh2、strongとemを含む段落、そして箇条書きを入れ子にした番号付きリストになります。
ハイライト付きのコードブロック
バッククォート3つで開始と終了を書きます。開始側の直後に書く単語が言語の指定で、プレビューでもGitHub上でもシンタックスハイライトの種類を決めます。
```ts
interface User {
id: number;
name: string;
}
```TypeScriptのキーワード、型、文字列が色分けされた等幅のブロックになります。言語を指定しなくても描画はされますが、色は付きません。
表と列の揃え方
表は本来のMarkdownにはないGFMの拡張です。区切り行のハイフンの左右どちらにコロンを置くかで、その列の揃え方が決まります。
| パッケージ | バージョン | サイズ |
| :--------- | :--------: | -----: |
| react | 19.0 | 6 kB |
| next | 16.0 | 2 MB |3列の表になり、1列目は左揃え、バージョンは中央揃え、サイズは右揃えで表示されます。
タスクリスト・打ち消し線・自動リンク
READMEやIssueのチェックリストを成り立たせているGFMの追加記法です。タスクリストは、本文が [ ] または [x] で始まるだけの普通のリスト項目です。
- [x] 仕様を書く
- [ ] 機能をリリースする
~~非推奨~~ 今後は https://example.com を参照してくださいチェックボックスが2つ（1つめはチェック済み）表示され、その下の段落では打ち消し線が引かれ、裸のURLがクリックできるリンクになります。
LaTeXの数式
ドル記号1つで行内数式、2つで中央寄せのブロック数式になります。ここではKaTeXで組版しており、GitHubも2022年からこの記法に標準対応しています。
行内数式：$E = mc^2$
$$
x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$行内数式は本文と同じ大きさで文中に収まり、ブロック数式は独立した行に中央寄せで、根号と分数が本来の高さで表示されます。
画像・リンク・生のHTML
画像はリンクの先頭に感嘆符を付けた記法です。CommonMarkはHTMLの直書きを許可していますが、GitHubは公開時にサニタイズするため、スクリプトやスタイルは取り除かれます。
<details>
<summary>クリックで展開</summary>
折りたたまれた内容。
</details>画像はその位置に読み込まれ、失敗時は代替テキストが表示されます。detailsは開閉できるブロックになり、GitHubでも同じように動作します。
同じMarkdownがどこでも同じ見た目になるのか
レンダラーはサービスごとに異なるため、同じファイルでも貼り付ける場所によって見え方が変わります。このプレビューは事実上の標準に最も近いGitHub Flavored Markdownに合わせています。
| プラットフォーム | 対応状況 | 備考 |
|---|---|---|
| GitHub / GitLab | 対応 | このプレビューの基準です。表、タスクリスト、打ち消し線、自動リンク、$...$ の数式まで一致します。 |
| VS Code | 対応 | 組み込みのプレビューはCmd/Ctrl+K Vで開きます。Mermaidなど一部は拡張機能が必要です。 |
| Qiita / Zenn | 対応 | 表、コードブロック、数式まで使えます。Zennのメッセージ記法など独自記法は各サイト専用です。 |
| Obsidian | 対応 | [[ウィキリンク]]やコールアウトが追加されており、他のレンダラーでは文字のまま表示されます。 |
| Notion | 一部 | 貼り付け時にネイティブのブロックへ変換されます。Markdownをそのまま常時描画するわけではありません。 |
| Discord | 一部 | 行内書式、見出し、リスト、コードブロックのみです。表、画像、数式は使えません。 |
| Slack | 一部 | 独自のmrkdwn方言で、*太字* と _斜体_ はアスタリスク1つです。見出しと表はありません。 |
このツールでMarkdownをプレビューする手順
Markdownを入力する
左側のエディタに直接書くか、既存の文書を貼り付けます。アップロードボタンからローカルの.md、.markdown、.txtファイルを開くこともできます。
リアルタイムのプレビューを見る
右側は入力のたびに描画し直されます。長い文書では同期スクロールを有効にしておくと、プレビューがカーソル位置に追従します。
HTML表示に切り替える
「HTMLを表示」を押すと、描画結果の代わりに、そのまま使える完結したHTML文書のソースが表示されます。
結果をコピーまたは保存する
MarkdownまたはHTMLをクリップボードにコピーするか、HTMLファイルとしてダウンロードします。Markdownのソースを書き出して保存することもできます。
よくある質問
Markdownのプレビューとは何ですか？
Markdownのプレビューとは、Markdownファイルを解析して整形済みのHTMLとして表示した画面のことです。記号のままの文字列ではなく、実際の見出し、太字、リスト、表、コードブロックとして描画されます。コミットや公開の前に仕上がりを確認するために使います。
何もインストールせずにMarkdownファイルをプレビューするには？
このページを開き、ファイルの中身をエディタに貼り付けるか、アップロードボタンからパソコン上の.mdファイルを選ぶだけです。右側にすぐ描画結果が表示されます。インストールも会員登録も拡張機能も必要ありません。
入力した内容はサーバーに送信されますか？
送信されません。解析と描画はすべてブラウザ内のJavaScriptで実行されるため、文書が端末の外に出ることはありません。下書きや社内ドキュメントなど、外部に渡したくない内容でも安心して貼り付けられます。
GitHub Flavored Markdownに対応していますか？
対応しています。表、タスクリストのチェックボックス、打ち消し線、URLの自動リンク、言語指定付きのコードブロックがすべて動作します。GitHubがREADMEやIssue、プルリクエストで有効にしているものと同じ機能セットです。
LaTeXの数式もプレビューできますか？
できます。行内の数式はドル記号1つ、独立した数式はドル記号2つで囲みます。組版には多くのドキュメントサイトで使われているKaTeXを利用しており、GitHubも2022年からこの記法に標準対応しています。
Markdownの表が表示されないのはなぜですか？
崩れる原因はほぼ3つです。見出し行の下にハイフンの区切り行がない、直前の段落と表の間に空行がない、行ごとに縦棒で区切ったセルの数が違う、のいずれかです。表はGFMの拡張なので、本来のMarkdownしか実装していないレンダラーでは無視されます。
プレビューをHTMLとして書き出すには？
「HTMLを表示」を押すと右側がコード表示に切り替わります。コードブロック、表、数式のスタイルまで含んだ完結したHTML文書が生成されるので、クリップボードにコピーするか、.htmlファイルとしてダウンロードできます。
VS CodeでMarkdownをプレビューするには？
ファイルを開いた状態で、macOSならCmd+Kのあとに V、WindowsとLinuxならCtrl+Kのあとに V を押すと、エディタの横にプレビューが開きます。Cmd/Ctrl+Shift+Vなら独立したタブで開きます。VS Codeの組み込みプレビューもGitHub Flavored Markdownにかなり近い挙動です。
プレビューの見た目がGitHubと違うのはなぜですか？
レンダラーごとに有効な拡張機能とHTMLのサニタイズ方針が違うためです。GitHubはセキュリティのためスクリプトやインラインスタイル、多くの属性を取り除き、独自のスタイルシートを適用します。そのためHTMLの構造が同じでも、フォントや余白までは一致しません。
MarkdownエディタとMarkdownビューアの違いは何ですか？
ビューアは既存のファイルを描画するだけですが、エディタはソースを書いたり直したりできます。このツールは両方を兼ねており、左側は行番号とシンタックスハイライトの付いたコードエディタ、右側がリアルタイムのビューアです。