Markdown プレビュー
MarkdownをHTMLにレンダリングし、ライブプレビューします。
Markdown はブラウザ内のローカルで描画され、サーバーにアップロードされることはありません。
MDX ドキュメントを扱っていますか? MDX Converter を試してください。
Markdown プレビュー について
この markdown プレビューツールは、入力に合わせて Markdown をクリーンな HTML に左右並びで描画するので、README やドキュメント、コメントがどう表示されるかを正確に確認できます。表、フェンス付きコードブロック、タスク形式のリスト、引用、リンク、インライン装飾を含む GitHub 風 Markdown（GFM）に対応しています。手軽な markdown エディターや markdown ビューアーとして、ドキュメントの下書きやリポジトリへのプッシュ前の書式確認、markdown を html に変換して CMS に貼り付ける用途に使えます。描画された出力はサニタイズされ、スクリプトやイベントハンドラーは取り除かれて安全にプレビューできます。素早く正確な gfm プレビューが必要な開発者、テクニカルライター、QA 向けに作られています。すべてはブラウザ内のローカルで処理されるため、下書きが端末から外に出ることはありません。
機能
- 入力に合わせて更新される左右並びのライブプレビュー
- 表・フェンス付きコードブロック・タスクリストに対応した GitHub 風 Markdown
- 見出し・リスト・引用・リンク・インライン強調に対応
- コメント形式の Markdown に合わせ、単一改行を改行として描画
- サニタイズ済み出力でスクリプト・iframe・イベントハンドラー・危険な HTML を除去
- ワンクリックで描画済み HTML をクリップボードにコピー
- 結果をそのまま使える .html ファイルとしてダウンロード
- すべてブラウザ内で動作
Markdown プレビュー の使い方
- 左の入力欄に Markdown を入力するか貼り付けます。
- プレビュー欄に描画された HTML が即座に表示されるのを確認します。
- Copy HTML をクリックすると描画済みマークアップをクリップボードにコピーできます。
- .html ボタンで出力をファイルとしてダウンロード、Clear で最初からやり直せます。
例
入力
# タイトル
- **太字**の項目
- [リンク](https://example.com)
出力
<h1>タイトル</h1>
<ul>
<li><strong>太字</strong>の項目</li>
<li><a href="https://example.com">リンク</a></li>
</ul>
Markdown の見出し・リスト・インライン装飾を HTML に描画した例。
よくあるエラーとトラブルシューティング
- 表が描画されずプレーンテキストとして表示される。 — GFM の表にはヘッダー行と、ダッシュとパイプによる区切り行が必要です。例えば | A | B | のあとに | --- | --- | を置きます。各行のパイプ数が揃っていることを確認してください。
- コードブロックの書式がドキュメント全体に漏れ出す。 — すべてのフェンス付きブロックを対応するトリプルバッククォートの行で閉じてください。閉じられていないフェンスがあると、以降のテキストがコードとして扱われます。
- 単一の改行が期待どおりに保持されない。 — このプレビューは単一改行を改行として描画します。段落を分けたい場合は、テキストブロックの間に空行を入れてください。
- script や iframe などの生 HTML タグがプレビューから消える。 — 出力はサニタイズされ、スクリプト・iframe・インラインのイベントハンドラーは仕様として除去されます。プレーンな Markdown か安全なインライン HTML を使ってください。
よくある質問
- ArrayKit の Markdown プレビューツールとは何ですか?
- 入力に合わせて Markdown をクリーンな HTML に左右並びで描画するライブ markdown プレビューです。公開前に README やドキュメント、コメントの書式を確認できます。
- Markdown プレビューは GitHub 風 Markdown に対応していますか?
- はい。Markdown プレビューは GFM を描画するため、表・フェンス付きコードブロック・タスク形式のリストがすべてプレビュー欄に正しく表示されます。
- 描画された HTML をコピーまたはダウンロードするには?
- Copy HTML をクリックして描画済みマークアップをクリップボードに送るか、.html ボタンでそのまま使えるファイルとしてダウンロードします。
- Markdown プレビューの HTML は再利用しても安全ですか?
- はい。出力はサニタイズされ、スクリプト・iframe・インラインのイベントハンドラーが除去されるため、他所に貼り付けても安全な HTML のままです。
- Markdown プレビューは単一の改行を保持しますか?
- はい。単一改行は改行として描画され、コメントやチャット形式の Markdown の一般的な挙動に一致します。
- このプレビューを使うと Markdown はサーバーに送信されますか?
- いいえ。Markdown はすべてブラウザ内で描画され、端末から外に出ることはありません。
関連ツール
すべての ArrayKit ツール