Markdown Preview

概要

• Markdownを入力すると同時に、右側でリアルタイムにプレビュー表示するツールです。

• 見出し・リスト・テーブル・リンクといった基本的な記法に加え、LaTeX数式（KaTeX）・mermaid図・脚注・絵文字ショートコードなど、GitHub Flavored Markdownを超えた拡張記法にも対応しています。

• <details>や<br>などの安全なHTMLタグは描画されますが、scriptタグやイベント属性はDOMPurifyによって除去されるため、安全にプレビューできます。

使い方

1. 1

   テキストエリアにMarkdownを入力します。

2. 2

   入力すると同時に、右側にプレビューがリアルタイムで表示されます。

3. 3

   見出し・リスト・コードブロック・テーブル・リンク・強調などの一般的なMarkdown記法に対応しています。

4. 4

   タスクリスト（- [x] / - [ ]）はチェックボックスとして表示されます。

5. 5

   LaTeX形式の数式（$数式$ / $$数式$$）はKaTeXにより描画されます。

6. 6

   ```mermaidコードブロックはmermaidによってフローチャート等の図として描画されます。

7. 7

   脚注（text[^1] と [^1]: 補足）、絵文字ショートコード（:smile: など）にも対応しています。

8. 8

   <details>や<br>など、安全な範囲の生HTMLタグも利用できます。

9. 9

   ハイライト（==text==）、上付き/下付き文字（^sup^ / ~sub~）、定義リスト（Term / : Definition）にも対応しています。

入力例・出力例

# Title

- item1
- item2

[link](https://example.com)

見出し・リスト・リンクとして表示されたプレビュー

利用シーン

• READMEやドキュメントをMarkdownで書きながら、実際の見た目をその場で確認する

• 数式やフローチャート（mermaid）を含む技術文書を、見た目を確認しながら執筆する

• GitHubなどで公開する前に、Markdownの記法ミスがないかをプレビューで確認する

よくある質問

注意点

• KaTeX（数式描画）とmermaid（図描画）のライブラリは、実際にその記法が使われた場合のみ遅延読み込みされます。初回描画時に少し時間がかかることがあります。

• scriptタグやonclickなどのイベント属性を含むHTMLはDOMPurifyによって除去され、実行されません。

• 非常に長いMarkdownを入力すると、プレビューの描画に時間がかかる場合があります。