開発者

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

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

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

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

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

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

  • GitHubやGitLabのREADMEを書いていて、コミット前にフォーマットを確認したい場合
  • ブログプラットフォーム、ドキュメントサイト、またはWiki用のマークダウン投稿を起草する場合
  • 送信前にマークダウンのメールやチャットメッセージが正しくレンダリングされるか確認する場合
  • 異なるフォーマットで実験し、即座に結果を見ることでマークダウン構文を学ぶ場合
  • CMSやメールテンプレートに貼り付けるために短いマークダウンスニペットをHTMLに変換する場合
  • 一部のフォーマットが期待通りにレンダリングされないマークダウン文書をデバッグする場合

手順:

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

計算式

# 見出し →

見出し

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

ユースケース

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

主な利点

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

プロのヒント

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

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

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

重要な用語の説明

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

関連コンセプト

例

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

結果の解釈方法

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

よくある質問

このツールはどのマークダウン構文をサポートしていますか?
見出し(#から######)、太字(**テキスト**)、斜体(*テキスト*)、インラインコード(`コード`)、コードブロック(```)、リンク([テキスト](url))、箇条書きリスト(- 項目)、番号付きリスト(1. 項目)、引用(> テキスト)をサポートしています。
私のコンテンツはどこかに保存またはアップロードされますか?
いいえ。すべての解析とレンダリングはJavaScriptを使用してブラウザ内で完全に行われます。入力した内容がサーバーに送信されたり、保存されたり、記録されたりすることはありません。
フォーマットが正しく表示されないのはなぜですか?
マークダウンには正確な構文が必要です——例えば、多くのレンダラーでは段落とリストを正しく区切るために間に空行が必要であり、見出しには#記号の後にスペースが必要です。使用しているフォーマットの周りにスペースや改行の抜けがないか確認してください。
コミット前にGitHubのREADMEをプレビューするために使えますか?
このツールがサポートする一般的なマークダウン要素であれば使用できます。GitHubのレンダラーは、この軽量なプレビューアーには含まれていない一部の追加のGitHub-Flavored Markdown拡張機能(表やタスクリストなど)をサポートしているため、基本的な構文を超える内容については必ずGitHub自体で最終的なレンダリングを確認してください。
Markdownで表を作成するにはどうすればいいですか?
標準のMarkdownは表に対応していませんが、GitHub-Flavored Markdownは対応しています。パイプ文字(|)で列を区切り、ハイフンでヘッダーの区切り線を作ります。このプレビューアは表をレンダリングしないため、対象プラットフォームでの最終的な表示を確認してください。
MarkdownでLaTeX数式を書けますか?
このプレビューアはLaTeX数式をサポートしていません。数式のレンダリングにはKaTeXやMathJaxをサポートするツールを使用してください。GitHubなどの一部のプラットフォームでもMarkdown内のLaTeXはレンダリングされません。
MarkdownでLaTeX数式を書けますか?
このプレビューターはLaTeX数式をサポートしていません。KaTeXやMathJaxをサポートするツールを使用してください。
Markdownでリンクを作成するにはどうすればいいですか?
[リンクテキスト](URL)の形式を使用します。画像には![代替テキスト](画像URL)を使用します。
なぜWYSIWYGエディタではなくMarkdownを使うべきですか?
Markdownはプレーンテキストなので、バージョン管理に適し、プラットフォーム間で一貫した出力を生成します。
チェックリストなどのMarkdown拡張機能はサポートしていますか?
コアMarkdown構文をサポートします。拡張拡張機能はターゲットプラットフォームのレンダラーに依存します。
Markdownで水平線を追加するにはどうすればいいですか?
ハイフン(---)、アスタリスク(***)、またはアンダースコア(___)を3つ以上独立した行にタイプします。

さらに多くのツールを見る

ツールライブラリ全体から厳選したおすすめです。