マークダウンプレビュー
マークダウンテキストをリアルタイムでプレビューします。見出し、リスト、コードブロックなどをブラウザ内で即座に確認できる無料ツールです。
マークダウンプレビューとは？
マークダウンプレビューは、マークダウン記法で書かれたテキストをリアルタイムにレンダリングして確認できる無料のオンラインツールです。見出し、リスト、テーブル、コードブロック、インラインフォーマットなど、一般的なマークダウン構文のフルレンジをサポートしています。デスクトップエディタをインストールすることなく、READMEファイル、ドキュメント、ブログ記事、技術記事の作成に最適です。
マークダウンプレビューの使い方
- 画面左側のエディタにマークダウンテキストを入力または貼り付けます。
- 入力中に右側のパネルでレンダリングされたHTMLプレビューがリアルタイムで更新されるのを確認します。
- 「サンプルを読み込む」ボタンを使用して、サポートされているマークダウン構文の包括的なサンプルを確認します。
- 見出し、太字、斜体、リスト、リンク、コードブロックを使用してフォーマットを調整します。
- 完成したマークダウンテキストをコピーして、プロジェクト、リポジトリ、またはブログプラットフォームで使用します。
ヒントとベストプラクティス
見出しの階層を適切に使用
常に単一のH1見出しから始め、サブセクションにはH2からH6を使用してください。これにより明確なドキュメント構造が作成され、読みやすさが向上し、スクリーンリーダーがコンテンツを効果的にナビゲートできるようになります。
公開前にプレビュー
リポジトリにコミットしたりブログに公開する前に、必ずマークダウンをプレビューしてください。リスト前の空行の欠落やフォーマットマーカーの閉じ忘れなど、小さな構文エラーが予期しないレンダリング結果を引き起こすことがあり、生のテキストでは見つけにくいです。
フェンスド・コードブロックをマスター
言語識別子付きのトリプルバッククォート（例：```javascript）を使用して、構文ハイライト付きのコードブロックを作成します。これにより技術ドキュメントの可読性が大幅に向上し、開発者がコードスニペットを素早く識別できるようになります。
参照スタイルのリンクを使用
リンクが多いドキュメントでは、参照スタイルのリンク [text][id] を使用してマークダウンソースをクリーンで保守しやすく保ちます。すべてのURLをドキュメントの下部に定義することで、一箇所で更新できます。
一般的な使用例
GitHub READMEファイル
GitHubにプッシュする前に、オープンソースプロジェクトのREADME.mdファイルを作成してプレビューします。フォーマット、バッジ、インストール手順、リンクがユーザーに表示される前に正しくレンダリングされることを確認しましょう。
技術ドキュメント
マークダウンでAPIドキュメント、セットアップガイド、開発者ハンドブックを作成します。GitBook、MkDocs、Docusaurusなどのドキュメントプラットフォームに公開する前に最終的な外観をプレビューしましょう。
ブログ記事の下書き
Hugo、Jekyll、GatsbyなどのStatick Site Generatorの多くはコンテンツ作成にマークダウンを使用しています。サイトをビルドしてデプロイする前に、ブログ記事をプレビューしてフォーマットの問題、壊れたリンク、レイアウトの問題をキャッチしましょう。
FAQ
どのようなマークダウン記法がサポートされていますか？
見出し、太字、斜体、取り消し線、リンク、リスト、引用、コード、水平線がサポートされています。
入力したマークダウンはサーバーに送信されますか？
いいえ。すべての処理はブラウザ内でローカルに行われます。入力したテキストがデバイスから送信されることは一切なく、完全なプライバシーが保証されます。
マークダウンテーブルは使用できますか？
はい、パイプ（|）とハイフン（-）を使用してカラムとヘッダーを定義するテーブルを作成できます。プレビューでは適切にフォーマットされたHTMLテーブルとして、きれいな配置とボーダー付きでレンダリングされます。
GitHub Flavored Markdown（GFM）に対応していますか？
このツールはチェックボックス付きタスクリスト、取り消し線テキスト、言語ヒント付きフェンスド・コードブロック、テーブルなど、ほとんどのGFM機能をサポートしています。GitHubリポジトリやwikiに向けたコンテンツのプレビューに最適です。
レンダリングされたHTMLをエクスポートできますか？
プレビューパネルからレンダリングされた出力を直接コピーできます。生のHTMLソースコードについては、ブラウザの開発者ツール（F12）を使用してプレビュー要素を検査し、生成されたHTMLマークアップをコピーできます。