💻 開発者ツール

Markdownプレビュー

左にMarkdownを書くと、右側でHTMLの見た目をその場で確認できます。生成されたHTMLのコピーにも対応。処理はすべてブラウザ内で完結するので、下書きやメモが外に出ることはありません。

例（クリックで試す）

Markdownプレビューの使い方

左のテキストエリアにMarkdownを入力すると、右側にHTMLの見た目がリアルタイムで表示されます。「HTMLを表示」に切り替えると、生成されたHTMLソースを確認・コピーできます。

  • プレビュー：書いたMarkdownが実際にどう表示されるかを確認できます。
  • HTMLを表示：変換後のHTMLソースを表示します。「HTMLをコピー」でそのまま貼り付けに使えます。
  • サンプル：記法の例をまとめたサンプルを読み込みます。はじめての確認に便利です。
  • クリア：入力をすべて消して、最初からやり直せます。

記法の具体例

たとえば # 見出し と書くと大きな見出し（<h1>）になり、- 箇条書き と書くと行頭に「・」の付いたリスト項目になります。次のように入力すると、

# はじめに
- 準備する
- 書いてみる

右側のプレビューでは「はじめに」が大きな見出しとして表示され、その下に「準備する」「書いてみる」が箇条書きで並びます。「HTMLを表示」に切り替えると <h1>はじめに</h1><ul><li>準備する</li><li>書いてみる</li></ul> のようなHTMLソースが得られ、「HTMLをコピー」でそのまま他の場所に貼り付けられます。

すばやく使うコツ

このツールは貼り付けた瞬間にライブでプレビューが更新されます。手元のMarkdownをそのままテキストエリアに貼り付ければ、ボタンを押さなくてもすぐに見た目を確認できます。HTMLが必要なときは「HTMLを表示」に切り替えて「HTMLをコピー」を押すだけです。

こんな場面で便利です

  • READMEやドキュメントを書く前に、見出しやリストの見た目をさっと確認
  • GitHubのIssueやPR本文に貼る前のMarkdownの下書きチェック
  • ブログやCMSに流し込むためのHTMLをMarkdownから生成
  • Markdown記法を覚えたいときの練習・確認用

よくある質問

入力したMarkdownはサーバーに送信されますか？
いいえ。変換とプレビューの処理はすべてお使いのブラウザ内で完結し、入力内容が外部に送信・保存されることはありません。下書きや社外秘のメモも安心してご利用いただけます。
どのMarkdown記法に対応していますか？
見出し（#〜######）、太字（**）、斜体（*）、インラインコード（`）、コードブロック（```）、箇条書き（-）、番号付きリスト（1.）、引用（>）、水平線（---）、リンク（[文字](URL)）、段落・改行に対応しています。
生成されたHTMLにスクリプトが埋め込まれる心配はありませんか？
ありません。入力されたテキストは先にHTMLエスケープしてからMarkdown記法を変換するため、生のHTMLタグやscriptは無効化されます。リンクのURLも http(s):// と「/」始まりの相対パスのみ許可し、javascript: などは無効化します。