Softonic

Markdownプレビュー

ステップ 1 / 2
次へ

左側に入力すると、右側にHTMLのレンダリング結果がリアルタイムで表示されます。このプレビューはGitHub Flavored Markdownに対応しており、テーブル、タスクリスト、構文ハイライト付きのフェンスコードブロック、取り消し線、自動リンクされたURL、インラインHTMLなどを扱えます。コミット前にREADMEの下書きを作成したり、プルリクエストのコメントがどう表示されるかを確認したり、キー入力ごとのレンダリングを見ながらMarkdownの構文を学んだりするのに便利です。

プレビューの使い方

  1. 1

    Markdownを書く

    左側のペインに生のMarkdownを入力します。変更するたびに右側のペインが即座に再描画されます。

  2. 2

    HTMLプレビューを確認する

    右側のペインに、GitHub風のスタイルが適用されたレンダリング結果が表示されます。

  3. 3

    表示モードを切り替える

    左右並列表示、プレビューのみ、ソースのみを切り替えて、集中して執筆できます。

  4. 4

    HTMLをコピーする

    レンダリングされたHTMLを取得して、メールソフトやCMSに貼り付けられます。

このプレビューが対応している機能

  • CommonMark: 見出し、段落、強調、リスト、引用、コードブロック、リンク、画像、水平線。
  • GFM拡張: 列揃えに対応したテーブル、タスクリスト（- [ ]と- [x]）、~~による取り消し線、自動リンクされたURL、言語ヒント付きのフェンスコードブロック。
  • 構文ハイライト: highlight.jsによりJavaScript、Python、Go、Rust、SQL、YAMLなど100以上の言語に対応。
  • 生のHTML: インラインHTMLはそのまま通されます（安全のためサニタイズされます）。
  • 数式（任意）: 数式拡張を有効にすると、$...$のインラインと$$...$$のブロックがレンダリングされます。

対応していないもの

  • Obsidian形式のカスタムWikiリンク（[[Page]]）: これはObsidian専用です。
  • Pandocのフェンス付きdiv（:::）: Pandoc専用です。
  • サーバーサイドインクルードや{% ... %}テンプレートタグ。

主な用途

  • READMEの下書き: IDEの外で作成し、最終版を貼り付けます。
  • PRコメントの書式確認: 投稿前に確認できます。GitHubのコメント欄ではコードフェンスが正しくプレビューされません。
  • メモをHTMLに変換: スタイル付きのコンテンツをメールや生HTMLを受け付けるCMSに貼り付けたいときに使えます。
  • Markdownを教える: 左右並列表示にすると構文がひと目でわかります。

パフォーマンス

レンダリングにはGFMプラグイン付きのMarkdown-itパーサーを使用し、すべてブラウザ内で動作します。数百KB程度のドキュメントはミリ秒でレンダリングされますが、非常に大きなファイル（1ファイルに書籍1冊分など）は入力中に引っかかることがあります。その場合は章ごとに分割してください。

エクスポート

  • HTMLをコピーすると、レンダリング結果とスタイル用クラスを含む<div>が得られます。
  • .mdをダウンロードすると、ソースが保存されます。
  • ブラウザの印刷ダイアログからPDFに印刷すると、レンダリング結果をスタイル付きのPDFとして出力できます。

よくある質問

GitHubはGFMの上に独自のCSSを適用しています。HTML出力自体は一致するはずで、スタイル（フォントや余白）はGitHub側のものです。完全に一致させたい場合は「GitHubでの表示」のテーマ切り替えを使ってください。

はい、数式拡張を有効にすれば、インラインの$...$とブロックの$$...$$がKaTeXでレンダリングされます。ページを軽く保つため、既定では無効になっています。

サニタイズされます。<div>、<span>、<table>、<img>などの安全なタグはそのまま通りますが、<script>やインラインのイベントハンドラーは削除されます。

数百KBまでは快適に動作します。非常に大きなファイルの場合は、リアルタイムレンダリングをオフにして、必要なときにレンダリングしてください。

レンダリングはすべてクライアント側で行われ、内容はどこにも送信されません。ページを再読み込みすると、ブラウザがフォームの状態を保持していない限り下書きは失われます。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

このツールは他の言語でも利用できます