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までは快適に動作します。非常に大きなファイルの場合は、リアルタイムレンダリングをオフにして、必要なときにレンダリングしてください。

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

関連ツール

Webpack設定ジェネレーター

短いフォームからwebpack 5のwebpack.config.jsを生成します。entry・出力フォルダー・モードを設定し、TypeScript、Babel、CSSローダー、HtmlWebpackPlugin、開発サーバーを切り替えるだけです。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

16進数から10進数への変換ツール

16進数を10進数（10進法）に変換します。メモリアドレス、エラーコード、RGBチャンネル、任意精度の整数に対応します。

.gitignore ジェネレーター

Laravel、Node.js、Python、Rails のプロジェクト用除外ルールを組み合わせます。結果をコピーするか、.gitignore 入りの ZIP をダウンロードできます。個人用ルールは別に表示します。

Markdownリンク生成ツール

URLとアンカーテキストからMarkdownリンクの記法を生成します。タイトルのツールチップや、長い文書を読みやすく整える参照形式のリンクにも対応しています。

Dockerfileジェネレーター

5つのアプリ構成に合うDockerfileと.dockerignoreを作成。実際の起動対象、作業ディレクトリ、内部ポートを入力し、両方のファイルを確認できます。

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