マークダウンプレビューアーとは?
マークダウンは、README、ブログ投稿、チャットメッセージ、ドキュメントなど、生のHTMLを書かずにシンプルで読みやすいフォーマットを実現したい無数の場所で使われている軽量なフォーマット構文です。マークダウンはプレーンテキストであるため、どこにでも書きやすい反面、構文をわずかに間違えても公開するまで気づかないことも同じくらい簡単です。
このプレビューアーは、入力と同時にマークダウンをソースと並べてレンダリングするため、フォーマットのミス——#の後のスペース漏れ、閉じられていないコードフェンス、上の段落と分離されなかったリストなど——をREADMEをコミットしたり、投稿を公開したり、フォーマット済みメッセージを送信したりする前にすぐに発見できます。
この計算機を使用するタイミング
- GitHubやGitLabのREADMEを書いていて、コミット前にフォーマットを確認したい場合
- ブログプラットフォーム、ドキュメントサイト、またはWiki用のマークダウン投稿を起草する場合
- 送信前にマークダウンのメールやチャットメッセージが正しくレンダリングされるか確認する場合
- 異なるフォーマットで実験し、即座に結果を見ることでマークダウン構文を学ぶ場合
- CMSやメールテンプレートに貼り付けるために短いマークダウンスニペットをHTMLに変換する場合
- 一部のフォーマットが期待通りにレンダリングされないマークダウン文書をデバッグする場合
手順:
- 左側のパネルにマークダウンを入力または貼り付けます。
- 右側でレンダリングされたHTMLプレビューが即座に更新されるのを確認します。
- プレビューが意図した通りになるまで構文を調整します。
- 結果に満足したら、完成したマークダウンソースをコピーします。
計算式
ユースケース
- コミット前にGitHubやGitLabのREADMEをプレビューする
- Slack、Discord、その他マークダウン対応のチャットアプリ向けにフォーマット済みメッセージを下書きする
- 公開前にブログ投稿やドキュメントのフォーマットを確認する
- 実験しながら結果をすぐに確認してマークダウン構文を学ぶ
- 短いマークダウンスニペットを他の場所に貼り付けるためにすばやくHTMLに変換する
主な利点
- マークダウンがソースと並んで即座にレンダリングされるのを確認
- どこかに公開する前に構文ミスを発見
- 完全にオフラインでブラウザ内で動作——何もアップロードされない
- 無料、登録不要、一般的な用途でファイルサイズの制限なし
プロのヒント
- 異なるマークダウンパーサー間で最も信頼性の高いレンダリングを得るため、リストやコードブロックの前後に空行を追加してください
- 曖昧さを避けるため、太字には二重アスタリスク、斜体には単一アスタリスク(またはアンダースコア)を使用してください
- まずこのツールでプレビューし、次に対象のプラットフォーム(GitHub、Slackなど)を確認してください——表など追加の構文をサポートしているものもあります
- ドキュメント構造とアクセシビリティを高めるため、見出しは連続させてください(#から###へ飛ばさないでください)
避けるべきよくある間違い
- 段落とその後に続くリストの間に必要な空行を忘れる
- 見出しの#記号の後のスペースを抜かしてしまい、レンダリングされなくなる
- コードフェンス(```)を閉じ忘れ、ドキュメントの残りがコードとして扱われてしまう
- 太字に二重ではなく単一のアスタリスクを使い、太字ではなく斜体になってしまう
重要な用語の説明
- CommonMark:不整合を減らすために設計された、マークダウン構文の標準化された仕様
- GFM:表やタスクリストをサポートする拡張された方言であるGitHub-Flavored Markdown
- コードフェンス:複数行のコードをフォーマットするために使用される、3つのバッククォート(```)で区切られたブロック
- インラインフォーマット:ブロックレベルの要素とは異なり、*斜体*や`コード`のように1行の中に適用されるフォーマット
関連コンセプト
- JSONフォーマッター:
- 正規表現テスター:
- パスワードジェネレーター:
- カラーコンバーター:
- URLエンコーダー/デコーダー:
例
「## こんにちは
これは**太字**でこれは*斜体*です。」と入力すると、レベル2の見出しの後に太字と斜体のテキストを含む段落がレンダリングされます。
結果の解釈方法
左パネルにはMarkdownの生のソーステキストが表示され、右パネルにはそれがリアルタイムで整形されたHTMLとしてレンダリングされます。キーを打つたびにプレビューが即座に更新されるため、各構文要素の効果をすぐに確認できます。
よくあるレンダリングの問題は、ほとんどが空白に起因します。ほとんどのレンダラーでは、段落とそれに続くリストの間に空行が必要です。見出しは#記号の後にスペースが必要です。コードフェンス(```)はコードブロックのレンダリングを開始するために、単独の行にある必要があります。
プレビューは、Markdownがほとんどのプラットフォーム(GitHub、Slack、Discordなど)でどのように表示されるかにかなり近い近似ですが、各プラットフォームにはそれぞれ微妙に異なるレンダラーがあります。基本的な書式を超えるものについては、必ず対象プラットフォームで最終確認を行ってください。

