Markdown プレビュー
レンダリングされたHTMLとしてMarkdownをプレビュー
Hello, Markdown
A quick bold word and some italics.
- Bullet one
- Bullet two
- Nested
- Bullet three
const greeting = 'hello world';
console.log(greeting);
Block quotes work too.
| Col A | Col B |
|---|---|
| 1 | 2 |
| 3 | 4 |
どのフレーバーのMarkdownがサポートされていますか？
プレビューは、GitHubフレーバーのMarkdown（GFM）用に設定された`marked`パーサーを使用します：`|`区切りのテーブル、```マーカーとプログラミング言語ヒントを持つフェンシングコードブロック、URLの自動リンク、タスクリストのチェックボックス（`- [ ]`）、および`~~text~~`による打ち消し線。
出力HTMLはレンダリング前にサニタイズされるため、信頼できないMarkdownを貼り付けてもスクリプトタグやスタイルシートをブラウザに挿入することはできません。生のサニタイズされていないHTML出力が必要な場合は、ローカルで専用のパーサーを使用してください。
使用例
- コミット前にREADMEをプレビュー — GitHubが見出し、コードブロック、リストをどのようにレンダリングするかを確認します。
- ドキュメントのドラフト — APIドキュメントをMarkdownで作成し、Notionやウィキに貼り付ける前にフォーマットをプレビューします。
- ニュースレター投稿の作成 — Markdownで書き、SubstackやBeehiiv用にプレビューしてから貼り付けます。
- Stack Overflowの回答をフォーマット — 提出前にコードフェンス、リスト、リンクをプレビューします。
例
# Title
**bold** and *italic* text.
- list item
- another<h1>Title</h1>
<p><strong>bold</strong> and <em>italic</em> text.</p>
<ul><li>list item</li><li>another</li></ul>よくある質問
どのMarkdown拡張がサポートされていますか？
GitHubフレーバーのMarkdown：テーブル、フェンシングコードブロック、自動リンク、タスクリスト、打ち消し線。脚注や注意書きはサポートされていません。
Markdown内にHTMLは許可されていますか？
はい、ただし出力はサニタイズされます — `<script>`、`<style>`、およびイベント属性はレンダリング前に削除されます。
レンダリングされたHTMLをエクスポートできますか？
ブラウザのソース表示またはDevToolsを使用してレンダリングされたHTMLをコピーします。プレビューを右クリックして、利用可能な場合は「フレームソースを表示」を選択します。
コードブロックは構文ハイライトされますか？
いいえ — フェンシングコードブロックは等幅スタイルでレンダリングされますが、言語の色ハイライトはありません。それを行うには、ローカルで`markdown-it` + `highlight.js`のようなMarkdownプロセッサを追加してください。
入力はサーバーに送信されますか？
いいえ。解析とレンダリングはブラウザ内で行われます。