メインコンテンツへスキップ
Tooletto

Markdownプレビュー

MarkdownからHTMLへのプリセット

Markdownを書いて、瞬時にレンダリングされるのを見られます。READMEやプルリクエストの説明、ドキュメントをコミットする前に下書きするのに便利です — プレビューはフレーム内でサンドボックス化されているため、貼り付けたコンテンツが何も実行できません。

  • ファイルは端末の外に出ません
  • 無料、登録不要
  • 透かしなし
  • 一度読み込めばオフラインでも動作します
Loading tool…

MarkdownからHTMLへの使い方

  1. 1

    Markdownを書くか貼り付け

    HTMLとプレビューが入力中に更新されます。

  2. 2

    プレビューを確認

    サンドボックス化されたフレーム内でレンダリングされるため、貼り付けたコンテンツはスクリプトを実行できません。

  3. 3

    HTMLをコピー

    マークアップをコピーするか、.htmlファイルとしてダウンロードします。

プレビューを見ながら書くことが生の構文を推測するより優れている理由

Markdownの魅力のすべては、プレーンテキストとして書いて読めることですが、まさにその単純さが、レンダリングされるまで特定のエラーを見えなくしているものです — 区切り行に縦棒文字が1つ欠けているテーブルは、テーブルではなく黙って通常の段落として表示されるように戻り、間違った数のスペースでインデントされたネストされたリストは間違った親要素に付いてしまいます。どちらの問題にもエラーメッセージはなく、意図したようには見えない出力があるだけです。書いている間に継続的に更新される実際のレンダリング結果を見ることで、この種の書式エラーがまさに導入された瞬間に検出できます。これは、完全なREADMEやプルリクエストの説明を盲目的に書いて、すでにどこかに公開された後で初めて書式が崩れていたことに気づくよりもかなり速いです。

特定の行き先に向けて下書きする

GitHub、ドキュメントサイト、フォーラム投稿は、すべて広くGFMをサポートしていても、エッジケースで同じMarkdownソースをわずかに異なってレンダリングすることがあります。そのため、レンダリングエラーが幅広い読者に見えてしまう行き先 — 公開されたREADME、リリースの告知、レビュアーが実際に注意深く読むプルリクエストの説明など — に向かう場合は、公開前にプレビューすることが特に価値を持ちます。

よくある質問

どのMarkdownの派生がサポートされていますか?

GitHub Flavored Markdown: テーブル、フェンス付きコードブロック、タスクリスト、取り消し線、自動リンク、CommonMarkのコアに加えてです。これはGitHub、Reddit、そしてほとんどの静的サイトジェネレーターが使う方言です。

信頼できないソースからのMarkdownを貼り付けても安全ですか?

プレビューはスクリプトを無効にしたサンドボックス化されたiframe内でレンダリングされるため、埋め込まれた`<script>`タグやイベントハンドラは実行できません。*生成されたHTML*はMarkdown内にあった生のHTMLをそのまま含み続けることに注意してください — 自分で書いていないコンテンツを公開する前にサーバー側でサニタイズしてください。

Markdown内の生のHTMLをサポートしていますか?

はい — Markdownはインラインでの HTMLを許可し、そのまま引き継がれます。だからこそ、ソースが信頼できない場合は上記のサニタイズの注意事項が重要になるのです。

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

GFMのテーブルはヘッダーの下にハイフンの区切り行が必要で、テーブルが段落の後に続く場合は先頭に空行が必要です。区切り行に1つでも縦棒が欠けていると、すべてが黙ってプレーンテキストに戻ってしまいます。