Markdown プレビュー オンライン

Markdown プレビュー オンライン: GitHub 風 Markdown を入力に合わせてクリーンな HTML にライブ描画し、コピーやダウンロードができます。

Markdown はブラウザ内のローカルで描画され、サーバーにアップロードされることはありません。

開発・運営：Udit Agarwal

Markdown Syntax, Explained

MDX ドキュメントを扱っていますか? MDX Converter を試してください。

Markdown プレビュー について

この markdown プレビューツールは、入力に合わせて Markdown をクリーンな HTML に左右並びで描画するので、README やドキュメント、コメントがどう表示されるかを正確に確認できます。表、フェンス付きコードブロック、タスク形式のリスト、引用、リンク、インライン装飾を含む GitHub 風 Markdown（GFM）に対応しています。手軽な markdown エディターや markdown ビューアーとして、ドキュメントの下書きやリポジトリへのプッシュ前の書式確認、markdown を html に変換して CMS に貼り付ける用途に使えます。初期設定では単一の改行が改行になり、GitHub style をオンにすると README と同じように空白として扱われます。script や iframe などのタグ、イベント属性、javascript: リンクは取り除かれますが、これは簡易的なフィルターで、完全なサニタイズではありません。素早く正確な gfm プレビューが必要な開発者、テクニカルライター、QA 向けに作られています。すべてはブラウザ内のローカルで処理されるため、下書きが端末から外に出ることはありません。

機能

• 入力に合わせて更新される左右並びのライブプレビュー
• 表・フェンス付きコードブロック・タスクリストに対応した GitHub 風 Markdown
• 見出し・リスト・引用・リンク・インライン強調に対応
• 初期設定では単一改行を改行として描画し、GitHub style では README と同じく空白として扱う
• script・style・iframe・object・embed・link・meta・base タグ、イベント属性、javascript: リンクを除去
• ワンクリックで描画済み HTML をクリップボードにコピー
• 結果をそのまま使える .html ファイルとしてダウンロード
• すべてブラウザ内で動作

Markdown プレビュー の使い方

1. 左の入力欄に Markdown を入力するか貼り付けます。
2. プレビュー欄に描画された HTML が即座に表示されるのを確認します。
3. Copy HTML をクリックすると描画済みマークアップをクリップボードにコピーできます。
4. .html ボタンで出力をファイルとしてダウンロード、Clear で最初からやり直せます。

例

入力

# Title

- **Bold** item
- [Link](https://example.com)

出力

<h1>Title</h1>
<ul>
<li><strong>Bold</strong> item</li>
<li><a href="https://example.com">Link</a></li>
</ul>

Markdown の見出し・リスト・インライン装飾を HTML に描画した例。

よくあるエラーとトラブルシューティング

• 表が描画されずプレーンテキストとして表示される。 — GFM の表にはヘッダー行と、ダッシュとパイプによる区切り行が必要です。例えば | A | B | のあとに | --- | --- | を置きます。各行のパイプ数が揃っていることを確認してください。
• コードブロックの書式がドキュメント全体に漏れ出す。 — すべてのフェンス付きブロックを対応するトリプルバッククォートの行で閉じてください。閉じられていないフェンスがあると、以降のテキストがコードとして扱われます。
• 単一の改行が期待どおりに保持されない。 — 初期設定では単一の改行が改行になります。GitHub が README を表示するときのように空白として扱いたい場合は GitHub style をオンにし、段落を分けたいときはブロックの間に空行を入れてください。
• script や iframe などの生 HTML タグがプレビューから消える。 — script・style・iframe・object・embed・link・meta・base タグと on* イベント属性は仕様として除去されます。プレーンな Markdown かシンプルなインライン HTML を使ってください。

よくある質問

ArrayKit の Markdown プレビューツールとは何ですか?

入力に合わせて Markdown をクリーンな HTML に左右並びで描画するライブ markdown プレビューです。公開前に README やドキュメント、コメントの書式を確認できます。

Markdown プレビューは GitHub 風 Markdown に対応していますか?

はい。Markdown プレビューは GFM を描画するため、表・フェンス付きコードブロック・タスク形式のリストがすべてプレビュー欄に正しく表示されます。

描画された HTML をコピーまたはダウンロードするには?

Copy HTML をクリックして描画済みマークアップをクリップボードに送るか、.html ボタンでそのまま使えるファイルとしてダウンロードします。

Markdown プレビューは HTML から何を取り除きますか?

script・style・iframe・object・embed・link・meta・base タグ、onclick などの on* イベント属性、javascript: で始まるリンクです。これは簡易的なフィルターで完全なサニタイズではないため、信頼できない相手から来た Markdown なら、公開前に専用のサニタイザーで HTML を処理してください。

Markdown プレビューは単一の改行を保持しますか?

初期設定では保持します。単一の改行はコメントやチャットと同じく改行になります。GitHub style をオンにすると、GitHub が README を表示するときのように単一の改行は空白になります。

このプレビューを使うと Markdown はサーバーに送信されますか?

いいえ。Markdown はすべてブラウザ内で描画され、端末から外に出ることはありません。

関連ツール

• MDX 変換ツール — MDXをテキストとしてレンダリングし、HTML → MDX 変換やMDXリテラルへのエスケープを行います。
• HTML フォーマッター — HTMLの整形・圧縮、インラインCSS/JSの整形、結果のプレビューを行います。
• HTML エスケープ / アンエスケープ — HTMLの特殊文字とエンティティをエスケープ・アンエスケープします。
• テキスト比較 — 2つのテキストを行単位で比較し、追加と削除を確認します。
• PDF からテキスト — PDFから選択可能なテキストをプレーンテキストまたはMarkdownとして抽出します。
• Mermaid 図レンダラー — Mermaid図（フロー、シーケンス、ガント）をブラウザ内でSVGにレンダリングします。
• JSON フォーマッター — JSONの整形・圧縮・検証を行い、エラー箇所も表示します。
• CSS / SCSS フォーマッター — CSS/SCSS/LESS の整形・圧縮、プロパティの並べ替え、重複の除去を行います。

コードフォーマッターの他のツール

• 正規表現テスター — 正規表現をライブでテストし、マッチ、グループ、フラグを確認します。
• CSS カラー変換 — HEX、RGB、HSL 間で変換し、ライブスウォッチを表示します。
• テキスト比較 — 2つのテキストを行単位で比較し、追加と削除を確認します。
• MDX 変換ツール — MDXをテキストとしてレンダリングし、HTML → MDX 変換やMDXリテラルへのエスケープを行います。
• CSS / SCSS フォーマッター — CSS/SCSS/LESS の整形・圧縮、プロパティの並べ替え、重複の除去を行います。
• JS / TS フォーマッター — JavaScript・TypeScript・JSX/TSX を Prettier のオプションで整形。素の JavaScript は圧縮もできます。
• HTML フォーマッター — HTMLの整形・圧縮、インラインCSS/JSの整形、結果のプレビューを行います。
• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• SQL フォーマッター — MySQL、PostgreSQL、SQL Server、SQLite、BigQuery、Oracle 向けにSQLを整形します。
• GraphQL フォーマッター — GraphQLのクエリやスキーマを整形・圧縮し、構文を検証してオペレーションを抽出します。
• Dockerfile フォーマッター — Dockerfileを整形し、ベストプラクティスやlintの提案を表示します。
• MongoDB クエリフォーマッター — MongoDBシェルのクエリと集約パイプラインを整形します。

コードフォーマッターのツールをすべて見る (32) · すべてのツール