WALUDO ツール
TEXT.04 MARKDOWN PREVIEW

Markdown オンラインプレビューエディター

書式ショートカットをソースエディターの横に配置し、プレビュー、HTML、プレーンテキストを同じ結果パネルで確認できます。

MARKDOWN

ソース

Marked 解析 + DOMPurify サニタイズ · 送信・保存されません
OUTPUT

ライブ結果

ソースのスクロールを同期
§ 01

Markdown ソースから使える結果までを 2 つのパネルで確認

1
1

入力またはファイルを開く

Markdown やテキストを直接書き、貼り付け、またはローカルファイルから読み込みます。書式バーは選択範囲の前後に構文を挿入します。

2
2

結果の種類を選ぶ

プレビューはレイアウト確認、HTML は CMS や Web ページ向け、プレーンテキストは読みやすい内容の抽出に使います。すべて同じ安全なレンダリング結果から生成されます。

3
3

コピーまたはダウンロード

右側の操作は選択中のタブに対応します。プレビューは完全な HTML 文書、HTML は断片、プレーンテキストはテキストをダウンロードします。

§ 02

ライブプレビューで公開前の構造問題を発見

Markdown のソースは読みやすい一方、表の整列、入れ子リスト、コードフェンス、リンクはレンダリング後の方が確認しやすくなります。分割プレビューなら編集と結果を同じ視線で追えます。

このページは表、タスクリスト、取り消し線、自動リンクを含む GitHub Flavored Markdown に対応しています。元の HTML は DOMPurify を通るため、スクリプト、危険な属性、安全でないプロトコルはプレビューに入りません。

§ 03

よく使う Markdown 構文

用途
構文
結果
見出し
# 見出し
レベル 1。# を増やすと下位レベル
強調
**太字** と *斜体*
強調された語
リンク
[文字](アドレス)
クリックできるリンク
引用
> 引用内容
引用ブロック
コード
3 つのバッククォートで囲む
書式を保つコードブロック
タスク
- [ ] 未完了
GFM タスクリスト
列を縦棒で区切る
GFM テーブル
§ 04

Markdown の解析と HTML の安全化は別の役割

Markdown パーサーは構文を HTML に変換しますが、任意の入力を安全にするわけではありません。このページでは DOM に挿入する前に専用のサニタイズを行います。

エディターの内容は現在のページのメモリにだけ存在します。自動保存や履歴はなく、更新するとサンプルに戻るため、残したい場合は Markdown をダウンロードするか結果をコピーしてください。

§ 05

よくある質問

Q1どの Markdown 構文に対応していますか?

一般的な Markdown に加え、GFM の表、タスクリスト、取り消し線、自動リンク、フェンス付きコードブロック、安全化した元 HTML の一部に対応しています。

Q2レンダリング後の HTML をなぜサニタイズするのですか?

Markdown には元の HTML を含められます。DOMPurify がスクリプト、イベント属性、危険な URL を除去するため、信頼できないコードがプレビューで実行されません。

Q3内容は自動保存されますか?

いいえ。LocalStorage や履歴は使用しません。更新するとサンプルに戻るため、必要な内容はコピーまたはダウンロードしてください。

Q4プレビュー、HTML、プレーンテキストの違いは?

プレビューは最終レイアウト、HTML はサニタイズ済みマークアップ断片、プレーンテキストは結果から読める文字を抽出して表示します。

Q5ローカルの Markdown ファイルを開けますか?

はい。FileReader がファイルをローカルで読み込むため送信されません。ソースエディターへドラッグすることもできます。

✳ WALUDO TOOLBOX ✳ ブラウザー標準ツール · NO SERVER · NO DATA COLLECTION

ファイルがパソコンから外へ出ることはありません · FILES STAY LOCAL · PRIVACY FIRST