エージェント向け Polysh を早期アクセスで提供中。コーディングエージェントがデモを録画し、Polysh が仕上げます。 ウェイティングリストに登録 →

Markdown プレビューアー

入力しながら Markdown を整形済みのページとして確認し、HTML をコピーできます。

ブラウザツールを読み込んでいます…

Markdown プレビューアーでできること

README、ヘルプセンターの下書き、リリースノートを Markdown で書くなら、結果を見ながらのほうが速く進みます。左側に貼り付けるか入力すると、右側に整形されたページが表示され、編集に合わせて更新されます。上部には単語数と読む時間も表示されます。

コミットや公開の前に、表の列が揃っているか、入れ子のリストが思ったとおりにインデントされているか、タスクリストにボックスが表示されるかを確認するのに使ってください。見た目が整ったら、「HTML をコピー」でプレビューの元になっているマークアップを取得できます。Markdown→HTML 変換では、完全なドキュメントとしても出力できます。

例

入力

## 週次アップデート

**自動字幕**をリリースしました。

- [x] 字幕
- [ ] ダークモード

「HTML をコピー」の結果

<h2 id="週次アップデート">週次アップデート</h2>
<p><strong>自動字幕</strong>をリリースしました。</p>
<ul>
  <li class="task-list-item"><input type="checkbox" disabled="" checked=""> 字幕</li>
  <li class="task-list-item"><input type="checkbox" disabled=""> ダークモード</li>
</ul>

プレビューには、チェック済みと空のチェックボックスが 1 つずつ表示されます。ページ上では、ツールのタイトルの下に収まるよう見出しが 1 段階小さく表示されますが、コピーした HTML では h2 のままです。

Markdown プレビューアーの使い方

  1. テキストエリアに Markdown を貼り付けるか、「ファイルを開く」で .md ファイルを読み込むか、「例を使う」をクリックします。
  2. 編集しながらプレビューを確認します。リンクされた画像を表示したい場合は、「その他のオプション」で「プレビューで外部の画像を読み込む」をオンにします。
  3. マークアップが必要なら「HTML をコピー」を、単独のページにするなら「.html をダウンロード」をクリックします。

知っておきたいこと

  • 一般的な GitHub 形式の構文には対応していますが、すべての拡張には対応していません。脚注、数式、Mermaid の図、:tada: のような絵文字のショートコードはプレーンテキストとして表示されます。
  • ./img/step-1.png のような相対パスの画像は、貼り付けたテキストの隣にフォルダーがないため読み込めず、プレースホルダーとして表示されます。
  • プレビューの上の単語数は簡易的な目安です。コードやリンクの URL を除いて数えるには、Markdown 単語数カウンターを使ってください。

Markdown プレビューアーについてよくある質問

エディターをインストールせずに Markdown ファイルをプレビューするには?

「ファイルを開く」をクリックして .md ファイルを選ぶか、内容を貼り付けます。テキストの横にすぐに整形されたページが表示され、編集に合わせて更新されます。インストールは不要で、ファイルはお使いのデバイスの外に出ません。

表がパイプ付きのプレーンテキストとして表示されるのはなぜですか?

Markdown の表には、ヘッダー行と、その直後に | --- | --- | のようなダッシュの区切り行が必要です。区切り行がないか、空行で離れていると、それらの行は通常の段落として表示されます。

1 回改行しても新しい行にならないのはなぜですか?

Markdown では、段落内の単一の改行はスペースとして読まれます。強制的に改行するには行末に 2 つのスペースかバックスラッシュを置き、新しい段落にするには空行を入れてください。

Markdown でタスクリストを作るには?

未完了のタスクはリスト項目を - [ ] で、完了したタスクは - [x] で始めます。プレビューアーはそれぞれにチェックボックスを表示します。既存の普通のリストをタスクにするには、Markdown チェックリストジェネレーターに貼り付けてください。