Markdownプレビューツール

Markdown記法で書いた文章を、その場でHTMLプレビューとして確認できます。見出し・箇条書き・表・コードブロック・リンクに対応しています。処理はすべてブラウザ内で完結し、入力内容がサーバーへ送信されることはありません。

入力に含まれる生のHTMLタグ(<script> 等)は常に無効化され、文字としてそのまま表示されます。

左に入力するとここにプレビューが表示されます。

このツールを共有

Markdownプレビューの使い方

  1. Markdownを入力する

    左の入力欄に見出し・箇条書き・表・コードなどを含む文章を入力します。「サンプルを試す」で見本を読み込めます。

  2. プレビューを確認する

    入力と同時に右側へHTMLとしての見え方が表示されます。GitHubやQiita等へ投稿する前の見た目確認に使えます。

  3. 問題があれば書き直す

    表の列がずれる、リンクにならないなどの場合は記法(パイプの数、リンクのスキーム等)を見直してください。

仕組みと考え方

本ツールは外部のMarkdownライブラリを使わず、自作の変換処理だけで動いています。入力全体をまず HTML エスケープ(&lt; や &amp; へ置き換え)してから、その上で見出しや太字などの安全なタグだけを追加していく、という順序を必ず守っています。この順序のため、入力に生の HTML タグ(&lt;script&gt; や onerror 属性付きの画像タグなど)を混ぜても、タグとしては解釈されず単なる文字として表示されます。プレビューは自分のブラウザで dangerouslySetInnerHTML を使って描画しているため、この無害化を怠ると入力した内容がそのまま実行されてしまう危険があります。

対応している記法は、見出し(# 〜 ######)、太字・斜体・インラインコード、フェンス付きコードブロック(```)、箇条書きと番号付きリスト、引用(>)、水平線(---)、簡単なパイプテーブル、そして http:// / https:// で始まるリンクです。コメントやHTML混在を許すJSON5のように、標準から外れた独自拡張(脚注、絵文字ショートコード、目次の自動生成など)には対応していません。

リンクは安全なスキームのみを許可しています。javascript: のようなスキームで始まるURLはリンク化せず、記法のまま文字として表示します。これは、Markdownとして書かれたリンクを経由してスクリプトを実行させる攻撃(javascript: URL によるXSS)を防ぐための制限です。

使いどころ・注意点

  • GitHub・Qiita・Slack など投稿先によって対応する記法(脚注、絵文字、@メンション等)が異なるため、最終的な見た目は投稿先でも確認する。
  • 表は列の数をヘッダー行と区切り行(---)で揃えないと崩れる。区切り行のパイプの数をヘッダーと一致させる。
  • コードブロックの中では太字・斜体などの記法は無視される(コードとしてそのまま表示するため)。
  • 個人情報や未公開の内容を貼り付けても、処理はブラウザ内で完結し外部へは送信されない。

よくある質問

入力した内容は保存・送信されますか?

いいえ。変換とプレビュー表示はすべてブラウザ内のJavaScriptだけで行っており、当サイトのサーバーへは送信していません。ページを閉じると入力内容は消えます。

生のHTMLタグを入力するとどうなりますか?

タグとしては解釈されず、エスケープされた文字(例: &lt;script&gt;)としてそのまま表示されます。入力を先にHTMLエスケープしてから安全なタグだけを追加する仕組みのため、スクリプトが実行されることはありません。

画像の埋め込み(![alt](url))には対応していますか?

対応していません。本ツールが対応する記法は見出し・強調・リスト・引用・水平線・テーブル・コード・リンク(http/httpsのみ)です。

表の列がずれて表示されます。

ヘッダー行と区切り行(| --- | --- |)の列数が一致していない可能性があります。区切り行のパイプの数をヘッダー行と揃えてください。

ほかの無料ツールも見る

文字数カウント

文字数(空白含む/除く)・バイト数・行数・単語数・原稿用紙の枚数・段落数・文の数・読了時間・文字種別の内訳を入力と同時に集計します。

文字列変換

大文字↔小文字、全角↔半角、ひらがな↔カタカナ、HTMLエスケープ、改行コード変換をまとめて行います。

テキスト差分(diff)

2つの文章を並べて比較し、追加・削除された行と文字を色分けして表示します。

重複削除・並べ替え

行単位の重複行の削除、五十音・英数字順の並べ替え、空行削除、行番号の付与を行います。

くじ引き・抽選

名前や景品を1行に1件ずつ貼り付けるだけで、暗号学的に安全な乱数で当選者を重複なく選びます。

JSON整形・検証

JSONの整形(インデント付与)・圧縮・構文エラー箇所の特定を行います。値が変わる箇所も警告します。

CSV⇔JSON変換

CSV・TSVをJSON配列へ、JSON配列をCSVへ相互変換します。引用符や改行を含むセルにも対応します。

Base64エンコード・デコード

日本語を含むテキストのBase64変換と復元を行います。URLセーフ形式やデータURIにも対応します。

URLエンコード・デコード

URLのパーセントエンコードと復元を行い、クエリパラメータを一覧で分解して確認できます。

正規表現テスト

正規表現のマッチ結果をハイライト表示し、キャプチャグループや置換結果をその場で確認できます。

ダミーデータ生成

氏名・住所・メールアドレス・電話番号などの架空のテストデータをCSV/JSONで一括生成します。

パスワード生成

文字種・文字数を指定して、暗号学的に安全な乱数で強力なパスワードを生成します。

ハッシュ生成

テキストやファイルからSHA-256・SHA-512・SHA-1・MD5のハッシュ値(チェックサム)を計算します。

JWTデコード

JWT(JSON Web Token)のヘッダー・ペイロードを復号して表示し、有効期限の切れを判定します。

セキュリティヘッダー簡易チェック

公開WebサイトのURLを指定し、代表的なセキュリティヘッダーの設定有無を確認します。

QRコード生成

URL・Wi-Fi・連絡先・メール・SMSのQRコードをその場で作成し、PNG/SVGでダウンロードできます。誤り訂正レベルと配色も選べます。

画像リサイズ・圧縮

画像の縦横サイズ変更・圧縮・形式変換(JPEG/PNG/WebP)をブラウザ内だけで行います。

カラーコード変換

HEX・RGB・HSLを相互変換し、背景色と文字色のコントラスト比(WCAG判定)も確認できます。

Unix時間変換

Unixタイムスタンプと日時を相互変換します。秒・ミリ秒、日本時間・UTCの両方に対応します。

UUID生成

UUID v4(完全ランダム)とUUID v7(時刻順)を、暗号学的に安全な乱数でまとめて生成します。