プレビュー結果はここに表示されます
ツール説明
Markdown プレビューについて
Markdown Preview は Markdown のソースを読みやすいプレビューに変換し、見出し、リスト、リンク、引用、テーブル、コードブロックを確認できます。
README、ドキュメントの断片、Issue、ブログ下書きを送る前の確認に使えます。
Markdown Preview の使い方
- Markdown のソースを貼り付けます。
- サンプルで GFM のテーブル、フェンス付きコードブロック、リンクの表示を確認します。
- 見出しの階層、リストのインデント、リンクの表示を確認します。
よくある利用場面
- README のコードブロックの言語指定とテーブルの揃えをコミット前に確認する。
- GitHub の Issue やリリースノートを投稿前にプレビューする。
- API ドキュメントの断片について、見出しとリストの入れ子を確認する。
Markdown の構文と崩れやすい書き方
Markdown は軽量ですが、空行、インデント、バッククォートの数でレンダリングが変わります。GitHub Flavored Markdown はテーブル、タスクリスト、フェンス付きコードブロックを追加します。
- 見出しは # を使い、順序立てた階層を保ちます。
- 入れ子のリストはインデントに依存し、タブとスペースの混在で崩れやすいです。
- フェンス付きコードブロックは 3 個のバッククォートで囲み、言語名を指定できます。
- リンクのテキストは「ここをクリック」ではなく、内容が分かる表現にします。
Markdown プレビューのよくある質問
- GitHub Flavored Markdown に対応しますか？
- テーブル、フェンス付きコードブロック、タスクリストなどよく使う GFM の機能はプレビューできますが、最終的な表示は対象プラットフォームに依存します。
- 入れ子のリストが反映されないのはなぜですか？
- 多くはインデントまたは空行の問題です。子項目は親より深くインデントし、記号の種類を揃えます。
- 内容はアップロードされますか？
- いいえ。Markdown のレンダリングはブラウザー内で実行され、wetool.site へ送信されません。
Markdown Preview と公開
プレビューは多くの表示崩れを見つけますが、GitHub、npm、フォーラム、CMS では Markdown 拡張やサニタイザーが異なることがあります。公開前に対象プラットフォームで再確認してください。
Markdown 方言の比較
プレビューツールは構造の問題を見つけるのに役立ちますが、プラットフォームごとの Markdown の方言は完全には同じではありません。
- CommonMark は見出し、段落、リスト、引用、コードブロックなどの基本構文を扱います。
- GitHub Flavored Markdown はテーブル、タスクリスト、打ち消し線、自動リンクなどよく使う拡張を追加します。
- ブログ、CMS、ドキュメントサイトは front matter、見出しアンカー、脚注、数式を追加することがあります。
安全なレンダリングと公開時の注意点
Markdown のプレビューは最終的な公開環境ではありません。HTML、画像、外部リンク、プラットフォーム側のフィルターに注意してください。
- 信頼できない Markdown を安全な HTML として扱わないでください。対象プラットフォームは通常生の HTML を sanitize します。
- 外部画像と links は公開後にリクエスト元、トークンパラメーター、内部アドレスを露出する可能性があります。
- README、npm のドキュメント、CMS のページを公開する前に、対象プラットフォームで最終的な表示を確認してください。