Markdownプレビューツール
Markdown記法で書いた文章を、その場でHTMLプレビューとして確認できます。見出し・箇条書き・表・コードブロック・リンクに対応しています。処理はすべてブラウザ内で完結し、入力内容がサーバーへ送信されることはありません。
入力に含まれる生のHTMLタグ(<script> 等)は常に無効化され、文字としてそのまま表示されます。
左に入力するとここにプレビューが表示されます。
Markdownプレビューの使い方
Markdownを入力する
左の入力欄に見出し・箇条書き・表・コードなどを含む文章を入力します。「サンプルを試す」で見本を読み込めます。
プレビューを確認する
入力と同時に右側へHTMLとしての見え方が表示されます。GitHubやQiita等へ投稿する前の見た目確認に使えます。
問題があれば書き直す
表の列がずれる、リンクにならないなどの場合は記法(パイプの数、リンクのスキーム等)を見直してください。
仕組みと考え方
本ツールは外部のMarkdownライブラリを使わず、自作の変換処理だけで動いています。入力全体をまず HTML エスケープ(< や & へ置き換え)してから、その上で見出しや太字などの安全なタグだけを追加していく、という順序を必ず守っています。この順序のため、入力に生の HTML タグ(<script> や onerror 属性付きの画像タグなど)を混ぜても、タグとしては解釈されず単なる文字として表示されます。プレビューは自分のブラウザで dangerouslySetInnerHTML を使って描画しているため、この無害化を怠ると入力した内容がそのまま実行されてしまう危険があります。
対応している記法は、見出し(# 〜 ######)、太字・斜体・インラインコード、フェンス付きコードブロック(```)、箇条書きと番号付きリスト、引用(>)、水平線(---)、簡単なパイプテーブル、そして http:// / https:// で始まるリンクです。コメントやHTML混在を許すJSON5のように、標準から外れた独自拡張(脚注、絵文字ショートコード、目次の自動生成など)には対応していません。
リンクは安全なスキームのみを許可しています。javascript: のようなスキームで始まるURLはリンク化せず、記法のまま文字として表示します。これは、Markdownとして書かれたリンクを経由してスクリプトを実行させる攻撃(javascript: URL によるXSS)を防ぐための制限です。
使いどころ・注意点
- GitHub・Qiita・Slack など投稿先によって対応する記法(脚注、絵文字、@メンション等)が異なるため、最終的な見た目は投稿先でも確認する。
- 表は列の数をヘッダー行と区切り行(---)で揃えないと崩れる。区切り行のパイプの数をヘッダーと一致させる。
- コードブロックの中では太字・斜体などの記法は無視される(コードとしてそのまま表示するため)。
- 個人情報や未公開の内容を貼り付けても、処理はブラウザ内で完結し外部へは送信されない。
よくある質問
入力した内容は保存・送信されますか?
いいえ。変換とプレビュー表示はすべてブラウザ内のJavaScriptだけで行っており、当サイトのサーバーへは送信していません。ページを閉じると入力内容は消えます。
生のHTMLタグを入力するとどうなりますか?
タグとしては解釈されず、エスケープされた文字(例: <script>)としてそのまま表示されます。入力を先にHTMLエスケープしてから安全なタグだけを追加する仕組みのため、スクリプトが実行されることはありません。
画像の埋め込み()には対応していますか?
対応していません。本ツールが対応する記法は見出し・強調・リスト・引用・水平線・テーブル・コード・リンク(http/httpsのみ)です。
表の列がずれて表示されます。
ヘッダー行と区切り行(| --- | --- |)の列数が一致していない可能性があります。区切り行のパイプの数をヘッダー行と揃えてください。