📄 Markdownプレビュー
Heron Tools
太字 と 斜体、インラインコード が使えます。
- リスト項目1
- リスト項目2
- 番号付き1
- 番号付き2
引用文です
console.log("code block");入力したMarkdown記法をリアルタイムでHTMLプレビュー表示するツールです。README作成やブログ記事の下書きの見た目を、公開前に確認するのに便利です。
使い方
- 入力欄にMarkdownテキストを入力するか貼り付けます。
- 右側のプレビュー欄にリアルタイムでレンダリング結果が表示されます。
- 見出しやリストなどの表示崩れがないか確認しながら編集します。
計算の仕組み
このツールは、入力したMarkdownを1行ずつ解釈してHTMLに変換し、その結果をプレビューとして表示しています。 対応している主な記法は、行頭の「#」〜「######」による見出し、「**太字**」「*斜体*」、行頭の「-」「*」による箇条書きと「1.」による番号付きリスト、「[テキスト](URL)」のリンク、「`コード`」のインラインコード、「```」で囲んだコードブロックです。 安全のため、入力に含まれるHTMLの「<」「>」「&」は文字としてエスケープしてから変換しています。そのため、Markdownの中にHTMLタグを書いてもタグとしては解釈されず、文字のまま表示されます。リンクは新しいタブで開くよう target="_blank" と rel="noopener noreferrer" を付けています。
計算例
次のMarkdownを入力した場合 # 買い物リスト - **牛乳** - パン 詳しくは[こちら](https://example.com) プレビューでは、「買い物リスト」が大見出し、「牛乳」が太字の箇条書き、「こちら」がリンクとして表示されます。 <b>タグ</b> のようにHTMLを書いた場合は、太字にはならず「<b>タグ</b>」という文字がそのまま表示されます。
使用上の注意
- テーブル・脚注・タスクリストなどの拡張記法には対応していません。
- HTMLタグはエスケープされ、文字として表示されます。
- GitHubなどのサービスとは、細かい記法の解釈が異なる場合があります。
- HTMLのソースを取り出したい場合は「Markdown→HTML変換」ツールを使ってください。
よくある質問
どこまでのMarkdown記法に対応していますか?
見出し・リスト・強調・リンク・コードブロックなど、一般的なMarkdown記法の主要な構文に対応しています。
入力内容は保存されますか?
いいえ、すべてブラウザ内で処理されるため、ページを離れると入力内容は失われます。
GitHubのREADME作成に使えますか?
はい。GitHub Flavored Markdownの基本的な構文をプレビューしながら書けるため、READMEやドキュメント作成の下書き確認に向いています。
表(テーブル)記法にも対応していますか?
基本的な見出し・リスト・強調・リンク・コードブロックに対応しています。複雑な拡張記法については、実際の公開先の表示を別途確認することをおすすめします。
コードブロックのシンタックスハイライトは表示されますか?
コードブロックとして区切って表示されますが、言語ごとの色分け(シンタックスハイライト)には対応していません。