Markdownプレビューツール

Markdownプレビューの使い方

1. 1

   Markdownを入力する

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

2. 2

   プレビューを確認する

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

3. 3

   問題があれば書き直す

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

仕組みと考え方

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

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

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

使いどころ・注意点

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

よくある質問