オンライン Markdown ビューアー

Markdown を貼り付けて、すぐにプレビュー。GFM・LaTeX・Mermaid・コードハイライトに完全対応。HTML コピー、PDF 出力、共有リンク発行がワンクリックで完結します。

リアルタイムプレビュー付き オンライン Markdown ビューアー

MD Viewer は、あらゆる Markdown をリアルタイムに読みやすい HTML へ変換できる無料のオンラインツールです。README、RFC、変更履歴、あるいは任意の .md ファイルを貼り付けるだけで、GFM テーブル、LaTeX 数式、Mermaid 図、コードハイライトを含めた完成形がすぐに確認できます。GitHub やドキュメントサイトと同等の表示品質で、ブラウザだけで完結します。

ちょっとした修正を加えたいときは、そのまま軽量エディタとしても使えます。左側で入力し、右側のプレビューをリアルタイムに確認。納得したらクリーンな HTML をワンクリックでコピーするか、公開共有リンクを発行するだけ。アカウント登録もインストールも不要です。

レンダリングを妥協しない Markdown ビューアー

多くのオンライン Markdown ツールは、脚注を無視したり、テーブルを崩したり、LaTeX をプレーンテキストのまま出力したり、Mermaid に対応しなかったりと、細部で手を抜いています。MD Viewer はプレビュー・HTML コピー・共有ページのすべてで同一のレンダリングパイプラインを使用しています。プレビューで見えている結果が、読者に届く結果そのものです。

リアルタイムプレビューは入力やペーストに応じて即座に更新されます。長大なドキュメント——数千語に数式や図を含む README でも——操作性が落ちないよう適切にデバウンスされています。

対応フォーマット

GitHub Flavored Markdown（GFM）

CommonMark の全仕様に加え、実務で頻繁に使われる GFM 拡張をすべてサポートしています。

  • カラム揃えに対応した テーブル
  • - [ ] / - [x] 形式の タスクリスト
  • 言語指定付き フェンスドコードブロック のシンタックスハイライト
  • URL の 自動リンク化
  • 長文ドキュメント向け 脚注
  • ~~text~~ による 取り消し線
機能 対応 補足
テーブル ✓ GFM アライメント構文対応
タスクリスト ✓ HTML 上でインタラクティブなチェックボックスとして表示
脚注 ✓ 自動採番
取り消し線 ✓ ~~このように~~

GitHub の README をそのまま貼り付けても、チェックボックスが欠けたり、テーブルが崩れたり、脚注が壊れたりすることはありません。

LaTeX 数式

$E = mc^2$ のようなインライン数式も、$$ ... $$ のブロック数式も KaTeX で正確にレンダリングされます。数式、行列、総和記号、ギリシャ文字——専用のビューアーを起動したりスクリーンショットに頼ったりする必要はありません。

int0inftye−x2,dx=fracsqrtpi2\\int_{0}^{\\infty} e^{-x^2}\\,dx = \\frac{\\sqrt{\\pi}}{2}

学術論文のプレビュー、機械学習の README、テクニカルノート、あるいは数式を含むあらゆる Markdown → HTML ワークフローに最適です。

Mermaid ダイアグラム

フローチャート、シーケンス図、クラス図、ガントチャート、ステート図がインライン SVG として描画されます。他の人のドキュメントに含まれる Mermaid ブロックを貼り付ければ、diagrams.net を開いたり PNG を追跡したりする必要なく、その場で図が表示されます。

flowchart LR
  Paste[Markdown を貼り付け] --> Render[リアルタイムプレビュー]
  Render --> Copy[HTML をコピー]
  Render --> Share[共有リンクを発行]

ダイアグラムは共有リンクにも含まれ、どのサイズでもシャープに表示されます。

画像・リッチメディア

Markdown の画像はネイティブ解像度でインライン表示されます。

画像の説明文

コピーした HTML には画像 URL がそのまま保持され、共有ページではモバイル端末でもレスポンシブに表示されます。コード、テーブル、数式、ダイアグラムと組み合わせれば、このオンライン Markdown ビューアーだけで技術記事の完成形を確認・共有できます。

キーボードショートカット

編集が必要なときも、キーボードから手を離さずに操作できます。

ショートカット 操作
Cmd / Ctrl + B 太字
Cmd / Ctrl + I 斜体
Cmd / Ctrl + K リンク挿入
Cmd / Ctrl + E インラインコード
Cmd / Ctrl + S ドラフト確定 / スナップショット保存
Cmd / Ctrl + / プレビューパネルの表示切替
Tab / Shift+Tab リストのインデント / アウトデント

複数のレンダリングテーマ

カラーパレット・タイポグラフィ・余白を一括で切り替えられるテーマを用意しています。CSS を一行も触れることなく、同じ Markdown を技術ドキュメント風、文芸エッセイ風、学術論文風、モダンなランディングページ風など、まったく異なる印象に仕上げられます。各テーマで調整される要素は次のとおりです。

  • 配色 — 背景、本文、見出し、リンク、コードブロック、引用のアクセントカラー
  • フォントファミリー — 長文にはセリフ体、プロダクトコピーにはサンセリフ体、技術文書にはモノスペース寄り、そして CJK フォントスタックにも対応
  • フォントサイズ・行間 — コンパクト、標準、ゆったりの各リーディングリズム
  • 見出しのスケール・ウェイト — 控えめなエディトリアルスタイルから、インパクトのあるマーケティング階層まで

テーマの選択はセッションをまたいで保持され、公開共有ページにも反映されます。読者があなたの選んだスタイルをそのまま目にするので、テーマを選ぶだけでそのまま発行可能な仕上がりになります。

このオンライン Markdown ビューアーでできること

  • あらゆる Markdown を貼り付けてすぐに確認 — README、RFC、変更履歴、議事録、設計ドキュメントに対応
  • プッシュ前に GitHub README をプレビュー — テーブル崩れ、リンク切れ、フォーマットミスを事前にキャッチ
  • 他の人から受け取った Markdown を閲覧 — .md ファイルをドロップするだけで、数秒で読みやすいページに
  • 気になる箇所をその場で修正 — ビューアーからエディタにシームレスに切り替え、一文字も失わない
  • クリーンな HTML をクリップボードにコピー — セマンティックで安全な HTML を CMS、ニュースレター、静的サイトにそのまま貼り付け可能
  • 公開共有リンクを生成 — スナップショットごとに固定 URL が発行され、サーバーサイドレンダリングでモバイルでも高速に閲覧可能
  • すべてブラウザ内で完結 — コンテンツは共有を選ぶまでデバイスの外に出ない

リアルタイムプレビューの仕組み

  1. ビューアーパネルに Markdown を貼り付けるか、直接入力します。
  2. プレビューペインが単一のレンダリング関数を通じて即座に結果を表示します — GFM、LaTeX、Mermaid、画像、コードハイライトすべて込み。
  3. Copy HTML をクリックすると、画面に表示されている HTML がそのまま取得できます。
  4. Share をクリックすると、Cloudflare D1 で管理された安定 URL にスナップショットが公開されます。

ひとつのパイプライン、ひとつの出力。意図しない差異は発生しません。

使用例：Markdown からクリーンな HTML へ

import { renderResult } from "@/lib/render";

const { html } = renderResult("# Hello\n\nShip clean **HTML** in one click.");
// html はサニタイズ済み、セマンティック、プレビューと完全に同一

同じ renderResult 関数が、ビューアーのプレビュー、クリップボードへの HTML コピー、サーバーサイドレンダリングの共有ページを一貫して駆動しています。クライアントから送られた HTML を正規の出力として信頼することはなく、共有レコードは必ずサーバー上で Markdown から再レンダリングされます。

目指したのは、もうひとつの Markdown フォーマッターを作ることではありません。開くのが速く、レンダリングに偽りがなく、共有リンクを送っても安心できる — そんなブックマークに値する Markdown ビューアーを作ることでした。

活用シーン

  • 受け取った .md ファイルをデスクトップアプリなしでさっと確認したいとき
  • コミット前に README が GitHub でどう表示されるかプレビューしたいとき
  • RFC、設計ドキュメント、会議アジェンダが Markdown 原文で届いたとき
  • 長文のテクニカル記事を公開前に最終チェックしたいとき
  • LaTeX を含む学術ノートや ML ドキュメントの数式表示を確認したいとき
  • CLI をインストールせずに Mermaid ダイアグラムを表示したいとき
  • Markdown をニュースレター、メール、CMS 向けのクリーンな HTML に変換したいとき
  • レンダリング済み Markdown ページをモバイル対応の公開リンクとして共有したいとき

この Markdown ビューアーが選ばれる理由

  • 完全無料・登録不要 — ページを開いてすぐ使える
  • GFM + LaTeX + Mermaid + 画像をフルサポート — 省略も中途半端な表示もなし
  • プレビューと出力が完全に一致 — ビューアー、コピー、共有で差異が出ない
  • クリーンなセマンティック HTML — どこに貼り付けてもすぐに使える
  • サーバーサイドレンダリングの共有リンク — 安定した URL で確実に表示
  • 複数テーマに対応 — カラー、フォント、サイズの組み合わせが最初から用意済み
  • 必要に応じて編集もできる — ビューアーがそのまま軽量な Markdown エディタに
  • モバイル対応の共有ページ — 読者はビューアーを開く必要なし
  • 軽量設計 — 無駄なツールバーもトラッキングもなし

使ってみる

上のサンプルをあなたの Markdown に置き換えてください。テキスト、テーブル、数式、ダイアグラム、画像がリアルタイムでレンダリングされます。見た目が整ったら、HTML をコピーするか共有リンクを発行するだけ。それがすべてのワークフローです — リアルタイムプレビュー付きのオンライン Markdown ビューアー。

mdviewer.net で詳しく見る