マークダウンプレビューアー

片側にマークダウンを入力すると、もう片側にリアルタイムでレンダリングされて表示されます——見出し、太字、斜体、リスト、コードブロック、リンクなど、すべてがブラウザ内で即座にプレビューされます。

このツールは役に立ちましたか？

マークダウンプレビューアーとは？

マークダウンは、README、ブログ投稿、チャットメッセージ、ドキュメントなど、生のHTMLを書かずにシンプルで読みやすいフォーマットを実現したい無数の場所で使われている軽量なフォーマット構文です。マークダウンはプレーンテキストであるため、どこにでも書きやすい反面、構文をわずかに間違えても公開するまで気づかないことも同じくらい簡単です。このプレビューアーは、入力と同時にマークダウンをソースと並べてレンダリングするため、フォーマットのミス——#の後のスペース漏れ、閉じられていないコードフェンス、上の段落と分離されなかったリストなど——をREADMEをコミットしたり、投稿を公開したり、フォーマット済みメッセージを送信したりする前にすぐに発見できます。

この計算機を使用するタイミング

Writing a GitHub or GitLab README and want to verify formatting before committing
Drafting a Markdown post for a blog platform, documentation site, or wiki
Checking a Markdown email or chat message renders correctly before sending
Learning Markdown syntax by experimenting with different formatting and seeing instant results
Converting a short Markdown snippet to HTML for pasting into a CMS or email template
Debugging a Markdown document where some formatting isn't rendering as expected

手順:

左側のパネルにマークダウンを入力または貼り付けます。
右側でレンダリングされたHTMLプレビューが即座に更新されるのを確認します。
プレビューが意図した通りになるまで構文を調整します。
結果に満足したら、完成したマークダウンソースをコピーします。

計算式

# 見出し →

見出し

**太字** → 太字 *斜体* → 斜体 `コード` → コード [テキスト](url) → テキスト - 項目 →

項目

ユースケース

コミット前にGitHubやGitLabのREADMEをプレビューする
Slack、Discord、その他マークダウン対応のチャットアプリ向けにフォーマット済みメッセージを下書きする
公開前にブログ投稿やドキュメントのフォーマットを確認する
実験しながら結果をすぐに確認してマークダウン構文を学ぶ
短いマークダウンスニペットを他の場所に貼り付けるためにすばやくHTMLに変換する

主な利点

マークダウンがソースと並んで即座にレンダリングされるのを確認
どこかに公開する前に構文ミスを発見
完全にオフラインでブラウザ内で動作——何もアップロードされない
無料、登録不要、一般的な用途でファイルサイズの制限なし

プロのヒント

異なるマークダウンパーサー間で最も信頼性の高いレンダリングを得るため、リストやコードブロックの前後に空行を追加してください
曖昧さを避けるため、太字には二重アスタリスク、斜体には単一アスタリスク（またはアンダースコア）を使用してください
まずこのツールでプレビューし、次に対象のプラットフォーム（GitHub、Slackなど）を確認してください——表など追加の構文をサポートしているものもあります
ドキュメント構造とアクセシビリティを高めるため、見出しは連続させてください（#から###へ飛ばさないでください）

避けるべきよくある間違い

段落とその後に続くリストの間に必要な空行を忘れる
見出しの#記号の後のスペースを抜かしてしまい、レンダリングされなくなる
コードフェンス（```）を閉じ忘れ、ドキュメントの残りがコードとして扱われてしまう
太字に二重ではなく単一のアスタリスクを使い、太字ではなく斜体になってしまう

重要な用語の説明

CommonMark：不整合を減らすために設計された、マークダウン構文の標準化された仕様
GFM：表やタスクリストをサポートする拡張された方言であるGitHub-Flavored Markdown
コードフェンス：複数行のコードをフォーマットするために使用される、3つのバッククォート（```）で区切られたブロック
インラインフォーマット：ブロックレベルの要素とは異なり、*斜体*や`コード`のように1行の中に適用されるフォーマット

例

「## こんにちは\n\nこれは**太字**でこれは*斜体*です。」と入力すると、レベル2の見出しの後に太字と斜体のテキストを含む段落がレンダリングされます。

結果の解釈方法

左パネルにはMarkdownの生のソーステキストが表示され、右パネルにはそれがリアルタイムで整形されたHTMLとしてレンダリングされます。キーを打つたびにプレビューが即座に更新されるため、各構文要素の効果をすぐに確認できます。よくあるレンダリングの問題は、ほとんどが空白に起因します。ほとんどのレンダラーでは、段落とそれに続くリストの間に空行が必要です。見出しは#記号の後にスペースが必要です。コードフェンス（```）はコードブロックのレンダリングを開始するために、単独の行にある必要があります。プレビューは、Markdownがほとんどのプラットフォーム（GitHub、Slack、Discordなど）でどのように表示されるかにかなり近い近似ですが、各プラットフォームにはそれぞれ微妙に異なるレンダラーがあります。基本的な書式を超えるものについては、必ず対象プラットフォームで最終確認を行ってください。

よくある質問

このツールはどのマークダウン構文をサポートしていますか？

見出し（#から######）、太字（**テキスト**）、斜体（*テキスト*）、インラインコード（`コード`）、コードブロック（```）、リンク（[テキスト](url)）、箇条書きリスト（- 項目）、番号付きリスト（1. 項目）、引用（> テキスト）をサポートしています。

私のコンテンツはどこかに保存またはアップロードされますか？

いいえ。すべての解析とレンダリングはJavaScriptを使用してブラウザ内で完全に行われます。入力した内容がサーバーに送信されたり、保存されたり、記録されたりすることはありません。

フォーマットが正しく表示されないのはなぜですか？

マークダウンには正確な構文が必要です——例えば、多くのレンダラーでは段落とリストを正しく区切るために間に空行が必要であり、見出しには#記号の後にスペースが必要です。使用しているフォーマットの周りにスペースや改行の抜けがないか確認してください。

コミット前にGitHubのREADMEをプレビューするために使えますか？

このツールがサポートする一般的なマークダウン要素であれば使用できます。GitHubのレンダラーは、この軽量なプレビューアーには含まれていない一部の追加のGitHub-Flavored Markdown拡張機能（表やタスクリストなど）をサポートしているため、基本的な構文を超える内容については必ずGitHub自体で最終的なレンダリングを確認してください。

What Markdown syntax does this tool support?

Headings (# through ######), bold (**text**), italics (*text*), inline code (`code`), code blocks (```), links ([text](url)), bulleted lists (- item), numbered lists (1. item), and blockquotes (> text).

Is my content saved or uploaded anywhere?

Why isn't my formatting showing up correctly?

Can I use this to preview a GitHub README before committing?

MarkdownとHTMLの違いは何ですか？

Markdownは、プレーンテキストとして書きやすく読みやすい軽量のマークアップ言語です。HTMLはより複雑な構文を持つ本格的なマークアップ言語です。Markdownは表示のためにHTMLに変換されることがよくあります。このツールはMarkdownをHTMLとしてリアルタイムにレンダリングします。

How do I create a table in Markdown?

標準のMarkdownは表に対応していませんが、GitHub-Flavored Markdownは対応しています。パイプ文字（|）で列を区切り、ハイフンでヘッダーの区切り線を作ります。このプレビューアは表をレンダリングしないため、対象プラットフォームでの最終的な表示を確認してください。

Can I write LaTeX math in Markdown?

This previewer doesn't support LaTeX math. For math rendering, use a tool that supports KaTeX or MathJax. Some platforms like GitHub don't render LaTeX in Markdown either.

マークダウンプレビューアー

マークダウン

プレビュー

Hello World

Type markdown on the left and see it rendered here.

Live preview
No sign-up
Runs entirely in your browser

Nothing you type ever leaves your device.


console.log("code blocks work too")

すべてブラウザ内でローカルにレンダリングされます——入力した内容がどこかに送信されることはありません。

このツールは役に立ちましたか？