Markdown Preview

Live Markdown preview

Live Markdown preview ブラウザ内でローカルに実行

About the

Markdown プレビューは、ほとんどの人が実際に使用している GitHub 拡張機能 (テーブル、タスクリスト、囲われたコードブロック、取り消し線、自動リンク) を備えた CommonMark に従って、入力中に Markdown を並べて表示します。これは、コミットする前に README を確認する最も簡単な方法です。Markdown がソースでどのように見えるか、レンダリングでどのように見えるかは明らかではなく、特にテーブル構文は、単一のパイプまたはダッシュが間違っている場合に通知なく失敗するためです。 Markdown 自体を処理しない場所で必要な場合は、レンダリングされた HTML をコピーすることもできます。

Where people use the

README をプッシュする前に、正しくレンダリングされることを確認してください。
結果のライブビューを使用してリリースノートまたは変更ログを作成します。
Markdown を受け入れない CMS 用に Markdown ドキュメントを HTML に変換します。
他の人の Markdown プルリクエストをレビューし、それがどのようになるかを確認します。

How to use the

1
Markdown を貼り付けるか書き込みます
エディターは、単一の段落から、見出し、リスト、リンク、コードフェンスを含む完全な文書まで、あらゆるものを受け入れます。
2
レンダリングされたパネルを確認する
プレビューはキーストロークごとに更新されるため、壊れたテーブルや閉じていないフェンスは、公開ステップの後ではなく、すぐに表示されます。
3
プレビューではなくソースを修正してください
プレビューは読み取り専用です。何かが正しくレンダリングされない場合、その原因はほとんどの場合、区切り文字行のないリストまたはテーブルヘッダーの前にある空白行が欠落していることです。
4
必要に応じて HTML をコピーします
HTML ビューに切り替えて、生成されたマークアップを取得します。これは、Markdown ではなく HTML を必要とする CMS に貼り付けるのに役立ちます。

ヒントとベストプラクティス

すべてのブロック要素の前後に空白行を残します。レンダリングに関する不可解なバグのほとんどは、空白行が欠落していることです。
コードがプレーンテキストとして扱われるのではなく強調表示されるように、言語名を含むフェンスで囲まれたコードブロックを使用します。
長い文書では 1 行に 1 つの文を入れてください。これにより、後で差分を読み取れるようになります。

よくある質問

どの Markdown 仕様が使用されますか?

CommonMark をベースに、テーブル、タスクリスト、フェンスコード、取り消し線用の GitHub フレーバーの Markdown 拡張機能を追加します。この組み合わせにより、GitHub、GitLab、およびほとんどのドキュメントサイトの README 形式がカバーされます。

私のテーブルがレンダリングされないのはなぜですか?

テーブルにはヘッダー行の直後にダッシュの区切り行が必要で、ブロックの前には空白行が必要です。各行にはヘッダーと同じ数のパイプが必要です。これらのいずれかが欠けていると、全体がパイプ文字を含むテキストの段落になります。

リスト項目が 1 つの段落に結合されたのはなぜですか?

Markdown では、段落とそれに続くリストの間に空行が必要です。これがないと、リストマーカーは通常のテキストとして扱われます。

LaTeX や数学をサポートしていますか?

いいえ。数学レンダリングには、KaTeX や MathJax などの別個のライブラリと別の構文が必要です。ここでのドル記号式はプレーンテキストとして表示されます。

生の HTML は許可されますか?

はい、インライン HTML は直接通過します。これは GitHub も同様に行います。出力をパブリックな場所に公開する場合は、生の HTML がスクリプトの挿入方法でもあるため、最初に出力をサニタイズしてください。

私のテキストはどこに行くのでしょうか?

どこにもない。解析とレンダリングは、JavaScript Markdown ライブラリを使用してブラウザーで行われます。何も保存または送信されないため、下書きはコピーしない限り、タブを閉じると消えてしまいます。