マークダウンエディター
マークダウンをリアルタイムでプレビューしながら作成し、HTMLに変換・コピーできます。
左側にマークダウンを入力すると、プレビューがここに表示されます。
💡 マークダウンエディターのヒント
ブログ記事のプレビュー
ブログ記事を作成する際のプレビューとして活用してください。
自動保存対応
ローカルストレージに自動保存されるため、リロードしてもデータは消えません。
GitHub README作成
GitHubのREADME.mdファイルを作成するのに便利です。
HTMLをすぐコピー
作成後、「HTMLコピー」ボタンでウェブサイトに直接貼り付けることができます。
⚙ 技術的原理:Markdownパーサーと CommonMark ASTレンダリング
Markdownは2004年にJohn GruberとAaron Swartzが「読みやすく書きやすい」マークアップ言語を目指して設計しました。核心のアイデアはメールで自然に使われていたテキスト表現の慣習(アスタリスクで強調、ハイフンでリスト)を形式化したものです。Markdownパーサーはテキストを読み込んで 抽象構文木(AST) を生成し、HTMLとして出力します。
初期のMarkdownには明確な仕様がなく、パーサーごとに動作が異なっていました。この問題を解決するため、2014年にJohn MacFarlaneらがCommonMark 標準を策定しました。GitHub Flavored Markdown(GFM)、GitLab、Redditなどがそれぞれの拡張を加えています。HeeyaTools Markdown Editorはmarked.js ライブラリを活用してCommonMark互換のレンダリングを実装しています。
レンダリングパイプライン:①Markdownテキスト入力→②トークナイザーで分解→③パーサーがAST生成→④レンダラーがHTMLに変換→⑤ DOMPurify でXSS脅威を除去→⑥安全なHTMLをプレビュー領域に挿入。⑤番がセキュリティの要です。
🔒 プライバシーアーキテクチャ:DOMPurifyによるXSS攻撃防御
Markdownから生成したHTMLをそのままブラウザに挿入すると
XSS(クロスサイトスクリプティング)攻撃
に脆弱になります。例えば
[click me](javascript:alert('XSS'))
のようなMarkdownが検証なしにレンダリングされると悪意あるスクリプトが実行される可能性があります。
HeeyaTools Markdown EditorはDOMPurify
ライブラリを使用して、レンダリングされたHTMLからすべてのイベントハンドラー(
onclick
、
onerror
など)、
javascript:
URL、
<script>
タグを自動的に除去します。
すべてのレンダリングと変換処理はブラウザ内の Zero-Server環境 で行われるため、作成中の文書の内容が外部サーバーに送信されることはありません。
📚 産業インサイト:Markdownの普及と現代ドキュメントエコシステム
MarkdownはGitHubのREADME.md文化の普及とともにオープンソースの公式ドキュメント形式となり、 Notion、Obsidian、Confluence、Dropbox Paper などの主要コラボレーションツールがMarkdownをコアの編集インターフェースとして採用しました。
Pandoc はMarkdownをPDF、EPUB、DOCX、LaTeXなど多様な形式に変換するユニバーサルドキュメントコンバーターで、専門家や研究者がMarkdownで草稿を書き、Pandocで出版形式に書き出す使い方が一般的です。
VS CodeのJupyter Notebookセル、AIモデルAPIのレスポンス形式、ChatGPT/Claudeの出力形式もすべてMarkdownを使用しています。Markdownの習熟は現代の技術専門家に不可欠なリテラシーです。