Markdown HTML 変換

Markdown HTML 変換

Markdown をクリーンで本番品質の HTML コードへ瞬時にリアルタイム変換。GFM テーブル、コードハイライト、XSS サニタイズ、リッチテキストコピー、完全なドキュメント出力を完備。

プリセット:
Markdown 方言:
出力フォーマット:
Markdown ソースエディタ
行数: 31単語数: 125文字数: 885バイト数: 885
解析レイテンシ: 3ms

Turbopack Build Optimizer

Build Status License: MIT

A next-generation zero-config build toolkit for modern web applications.

Feature Matrix

| Capability | Classic Webpack | Turbopack Native |
| :— | :—: | :—: |
| Cold Start (10k modules) | 8.4s | 1.2s |
| HMR Update Latency | 320ms | 18ms |
| Memory Footprint | 640 MB | 180 MB |

Roadmap & Progress

  • Rust-powered AST parsing engine
  • WebAssembly parallel sourcemap bundler
  • Edge runtime hot-reload socket connection
  • Automated polyfill treeshaking
# Install Turbopack globally
npm install -g @toolsaa/turbopack-cli

# Run dev benchmark
turbopack dev –port 3000
HTML 出力サイズ: 3424 bytesコンパイル完了: 100%
XSS 無害化済
解析レイテンシ3 ms
XSS サニタイズ厳格 DOM サニタイズ (XSS 防御)
出力フォーマットstandalone
完全クライアントサイド処理

ブラウザのローカルメモリ上で完結し、最高速の構文解析と変換処理を実現。

サーバー送信ゼロの完全プライバシー

すべての処理が端末内で完結。外部サーバーへのペイロード送信は一切ありません。

本番対応の高品質エクスポート

CMS 向けクリーン HTML や完全自立型ドキュメントなど、即座にデプロイ可能な形式で出力。

技術リファレンス・アーキテクチャガイド

Markdown to HTML Converter & Live Preview ガイド — 技術リファレンス

Markdown を本番環境対応のセマンティックで安全な HTML コードへリアルタイムに変換。GFM 表組み、シンタックスハイライト、XSS サニタイズ無害化、リッチテキストコピー、およびスタンドアロン完全文書出力に対応。

Markdown to HTML Converter & Live Preview ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図
Markdown to HTML Converter & Live Preview ガイド — 技術リファレンス — クライアントサイド完全ローカル実行アーキテクチャ図

主要パラメータと設定項目

生Markdownソース (rawMarkdownSource)文字列 (RFC 7763 text/markdown)

CommonMark または GitHub Flavored Markdown (GFM) 構文仕様に準拠した UTF-8 入力ドキュメントストリーム。サンドボックス化された Web Worker 実行コンテキスト内で、有界先読み（Bounded Lookahead）による決定論的 O(n) 線形時間で字句解析（トークナイズ）を実行し、Frontmatter ブロック、ブロックレベル要素、およびインライン要素を分離・抽出します。

初期値: Auto
Markdown方言・構文仕様モード (markdownDialectMode)列挙型 [gfm | commonmark | minimal]

字句解析エンジンの仕様および抽象構文木（AST）構築ルールを制御します。「gfm」は GitHub Flavored Markdown 拡張機能（パイプテーブル、取り消し線、自動リンク、タスクリスト）を適用、「commonmark」は CommonMark 0.31.2 厳密仕様に準拠、「minimal」は複雑なネスト拡張を抑止しつつ標準的な引用および見出しトークンをパースします。

初期値: gfm
HTML出力形式モード (htmlExportMode)列挙型 [fragment | standalone | email-inline]

コンパイル済み DOM ノードのシリアライズ範囲を設定します。「fragment」はクリーンでセマンティックな HTML 要素（<article>）のみを出力、「standalone」は <!DOCTYPE html>、メタデータ、ビューポート設定を含む妥当な W3C HTML5 完全ドキュメントを構築、「email-inline」は RFC 5322 メールクライアントのレンダリングエンジン向けに CSS カスケードルールをインライン style 属性へ展開します。

初期値: fragment
XSSサニタイズポリシー (xssSanitizationPolicy)列挙型 [strict-sanitized | trusted-raw]

DOMPurify およびブラウザの DOMParser サンドボックスを利用した、再帰的 AST/DOM ツリー走査によるサニタイズ（無害化）を強制します。安全な URI スキーム（http:、https:、mailto:）をホワイトリスト化し、スクリプト実行ベクター、iframe、object 埋め込み、およびインライン DOM イベント属性（onload、onerror、onclick など）を徹底除去して、格納型 XSS（Stored XSS）および CSP 違反を未然に防止します。

初期値: strict-sanitized
見出しアンカースラッグ生成ポリシー (headingAnchorPolicy)列挙型 [kebab-slug | numeric-id | none]

<h1>〜<h6> 見出しタグに対する id 属性の決定論的自動生成を制御します。「kebab-slug」は見出しテキストを RFC 3986 URI フラグメント規格に準拠した英小文字・数字・ハイフンの形式（ケバブケース）へ変換し、ドキュメント内ディープリンクを構築します。「numeric-id」は単調増加の連番識別子を付与し、「none」は付与を無効化します。

初期値: kebab-slug
外部リンクセキュリティポリシー (externalLinkPolicy)真偽値 (Boolean)

href 属性のホスト名が window.location.hostname と異なるすべての外部アンカー（<a>）ノードに対して、rel="noopener noreferrer" および target="_blank" を自動注入します。これにより window.opener の悪用ベクターを通じたリバースタブナビング（Reverse Tab-nabbing）攻撃を無力化します。

初期値: true
Frontmatterメタデータ抽出ポリシー (frontmatterExtraction)真偽値 (Boolean)

Markdown コンパイル前に、先頭の 3 連ハイフン（---）または 3 連プラス（+++）で区切られたメタデータブロックを分離・抽出します。構造化された YAML/TOML キー・バリューペアをメタデータオブジェクトとしてシリアライズし、生の区切り文字が HTML 本文へ漏洩するのを防ぎます。

初期値: true
スマートタイポグラフィ・約物置換 (smartTypography)真偽値 (Boolean)

インラインコードスパンを保護しつつ、決定論的線形正規表現置換によりストレート引用符（ASCII クォート）をカーリークォート（&ldquo;/&rdquo;、&lsquo;/&rsquo;）へ、2連/3連ハイフンを二分/全角ダッシュ（&ndash;/&mdash;）へ、連続ピリオドを三点リーダー（&hellip;）へスマートに自動変換します。

初期値: true

現場のベストプラクティス・実践Tips

GFMテーブル変換には明示的なヘッダー区切り行が必須

GitHub Flavored Markdown (GFM §4.10) および CommonMark テーブル拡張仕様において、ヘッダー行の直下に区切り行（Delimiter Row）が存在しない場合、ASCII テキストはセマンティックな <table> タグとしてトークナイズされません。区切り行には各列あたり最低 3 つのハイフンが必要です（例: '| :--- | :---: | ---: |'）。コロン記号によりテキスト配置（左揃え ':---'、中央揃え ':---:'、右揃え '---:'）を指定します。区切り行の欠落、テーブル直前の空行の欠落、あるいはセル内の垂直パイプ文字（\|）のエスケープ漏れが発生すると、パーサーはテーブル状態を破棄し、生の段落テキストとしてフォールバック処理します。

未サニタイズなMarkdownリンク・画像による格納型XSS攻撃の防御策

Markdown の仕様では、デフォルトで生の HTML タグの直接記述や任意の URI スキームが許可されているため、高重大度のクロスサイトスクリプティング（XSS）リスクを孕んでいます。攻撃ベクターの代表例として、難読化された [悪意あるリンク](javascript:alert(document.domain)) や、data: URI および悪意ある SVG を含む画像タグが挙げられます。クライアントサイド Web アプリケーションでは、コンパイラの生出力を決して innerHTML へ直接流し込んではなりません。常に O(n) 計算量の DOMPurify サニタイザーまたはブラウザ標準の HTML Sanitizer API を介し、厳格なプロトコルホワイトリスト（http:、https:、mailto:）および CSP Level 3 準拠ディレクティブを強制適用してください。

改行タグ（<br />）の保持：末尾2スペースとバックスラッシュ記法の使い分け

CommonMark §6.7 の厳密な仕様において、段落内の単一改行は「ソフトブレーク」として解釈され、シリアライズ後の HTML 出力では単一の半角スペース（0x20）へ圧縮されます。明示的な改行タグ（<br />）を強制生成するには、行末に 2 つ以上の半角スペースを付与するか、行末にバックスラッシュ（\）を記述して改行する必要があります。プログラムによる自動化パイプラインでは、パーサーオプションの breaks: true を有効化することでソフトブレークを自動的に <br /> タグへ変換可能です。これはチャット UI、ログビューアー、HTML メルマガ等の実装において極めて重要です。

モダンWebフレームワークへのHTML埋め込み時に発生するCSSスコープの罠

コンパイルされた無加工の HTML 断片をモダンなコンポーネント指向フレームワーク（React、Next.js、Vue など）へ直接展開すると、ホスト側のユニバーサルリセット CSS やグローバルな table / list スタイルと競合し、レイアウト破綻を引き起こすことが多々あります。出力された HTML は必ず独立した名前空間コンテナ（例: <article class="markdown-body">）でラップし、スコープ化された CSS カスタムプロパティを適用するか、本ツールの「スタンドアロン HTML5 完全ドキュメント」エクスポート機能を選択して、CSS Containment Module Level 2 に準拠したリセットスタイルを完全カプセル化してください。

よくある落とし穴とトラブルシューティング

⚠️Markdownテーブルが <table> タグに変換されず、パイプ記号を含んだ生のテキストのまま出力される

ヘッダー行の直下に、各列あたり最低 3 つのハイフンを含む妥当な区切り行（例: '| --- | --- |'）が存在するか確認してください。さらに、テーブルブロックの直前に必ず空行（ブランクライン）を挿入してください。CommonMark および GFM のブロックレベルパーサーは、先行する段落トークンを確定させてテーブル状態遷移マシンを開始するために、手前の空行を必須要件としています。

⚠️<div> や <span> などの生HTMLタグが &lt;div&gt; のように実体参照へエスケープされてしまう

これは、XSS サニタイズポリシーが「厳格エスケープ」モードに設定されているか、Markdown コンパイラ側で html: false オプションが有効になっている場合に発生します。Markdown 内で正当な HTML 要素をレンダリングするには、実行可能スクリプトを除去しつつ安全な HTML タグの通過を許可するサニタイズポリシーを選択してください。また、対象の HTML タグの先頭に 4 つ以上の半角スペースまたはタブ文字が付与されていないか確認してください（インデントコードブロックとして誤認識される原因となります）。

⚠️フェンスドコードブロックがシンタックスハイライト（構文着色）されず、単なるプレーンテキストとして表示される

標準的な Markdown パーサーは構造的な HTML ラッパー（例: <pre><code class="language-typescript">...</code></pre>）のみを生成する仕様となっており、CSS カラーテーマ自体は同梱していません。視覚的なトークン着色を反映させるには、ホスト側の Web ドキュメントに Prism.js や Highlight.js などのスタイルシートを読み込むか、本ツールのエクスポート形式を「スタンドアロン HTML5 ドキュメント」に切り替えて、事前定義済みの自己完結型シンタックスハイライト CSS を自動注入してください。

⚠️リスト項目内のインデントした複数行テキストが、意図せず独立したコードブロックへ変換されてしまう

CommonMark §4.4 の仕様に基づき、リスト項目のインデント位置からさらに 4 つ以上の半角スペースまたは 1 つのタブ文字でインデントすると、パーサーはインデントコードブロックトークンとしてインスタンス化します。同一 <li> 要素内で複数段落や継続コンテンツを適切にフォーマットするには、リストマーカーの幅に合わせた正確に 2 つの半角スペースで後続行をインデントし、4 スペースの閾値を超えないように調整してください。

よくある質問 (FAQ)

JavaScript で Markdown を HTML に変換するにはどうすればよいですか？▼

JavaScript で Markdown を HTML へ変換するには、marked や markdown-it などの実績あるパーサーライブラリを用いて生の Markdown 文字列を抽象構文木（AST）へパースし、HTML 文字列へコンパイルします。ES6+ の実装例: import { marked } from 'marked'; const rawHtml = marked.parse(markdownText, { gfm: true, breaks: true });。生成されたマークアップを innerHTML 経由で DOM に挿入する際は、格納型 XSS（Stored XSS）脆弱性を排除するため、必ず DOMPurify.sanitize(rawHtml) などのサニタイザーを通してから展開してください。

CommonMark と GitHub Flavored Markdown（GFM）の違いは何ですか？▼

CommonMark は、各種パーサーエンジン間の解釈の不一致を解消するために策定された、曖昧さのない標準化された Markdown コア仕様です。一方、GitHub Flavored Markdown（GFM）は CommonMark 0.29 をベースとした正式な上位拡張仕様（スーパーセット）であり、開発者向けワークフローに最適化されています。GFM ではパイプテーブル（| 列 |）、タスクリスト（- [ ] / - [x]）、URL自動リンク検出、取り消し線（~~テキスト~~）、言語識別子付きフェンスドコードブロックなどが標準機能として追加されています。

Markdown で HTML の <table> タグに正しく変換されるテーブルを作成する方法は？▼

Markdown から妥当な HTML <table> を生成するには、まず垂直パイプ（|）で区切ったヘッダー行を記述し、その直下に各列最低 3 つのハイフンを配置した必須の区切り行を設けます。記述例: '| パラメーター | デフォルト値 |' の直下に '| :--- | ---: |' を置き、データ行 '| タイムアウト | 5000ms |' を続けます。区切り行のコロン記号（:）でテキスト配置（左揃え ':---'、中央揃え ':---:'、右揃え '---:'）を指定でき、パーサーによりセマンティックな <table>、<thead>、<tbody>、<tr>、<th>、<td> タグへ正確にコンパイルされます。

Markdown を HTML にレンダリングする際の XSS（クロスサイトスクリプティング）攻撃を防ぐには？▼

Markdown 変換時の XSS 攻撃を防ぐには、多層防御サニタイズパイプラインの構築が不可欠です。第一に、Markdown コンパイラ側で任意の生 HTML 記述を禁止するか、危険な URI プロトコルを遮断する設定を行います。第二に、出力された HTML 文字列を DOMPurify や W3C Sanitizer API などの検証済みサニタイザーへ通し、<script> タグ、object 埋め込み、インラインイベント属性（onload, onerror）、および安全でない擬似プロトコル（javascript:, data:text/html）を再帰的かつ徹底的に除去します。

Markdown をスタイル付きの完全なスタンドアロン HTML ドキュメントに変換するには？▼

Markdown を単体で閲覧可能な HTML ページに変換するには、コンパイル後の HTML 断片を <!DOCTYPE html>、<html lang="ja">、文字コード指定 <meta charset="utf-8">、レスポンシブ viewport 設定、およびタイポグラフィ CSS を完備した完全な HTML5 テンプレートでラップします。本ツールでは、エクスポート形式として「スタンドアロン HTML5 完全ドキュメント」を選択するだけで、GitHub スタイルの美しく洗練されたレスポンシブ組版とダーク/ライトモード CSS が組み込まれた、本番対応の単一 HTML ファイルを一括生成できます。

Markdown での改行が HTML 上で改行（<br>）として反映されないのはなぜですか？▼

標準の CommonMark 仕様 §6.7 では、段落内での改行は「ソフトブレーク」として扱われ、HTML コンパイル時に単一の半角スペース（0x20）へ統合される仕様になっています。これはエディタ内での文章折り返しがレイアウトを崩さないようにするための設計です。HTML 上で明示的な改行（<br />）を発生させるには、行末に 2 つ以上の半角スペースを付加するか、改行直前にバックスラッシュ（\）を入力するか、Markdown パーサーのコンパイル設定で breaks: true オプションを有効化する必要があります。

関連開発者ツール

全ツール一覧 →
Cron式パーサー・構文検証開発者ツール

Cron式を直感的な実行スケジュールに高精度変換。タイムゾーン別の次回実行予定日時の算出、crontab構文の妥当性検証、将来のトリガー予測を完全ローカルで実行します。

ツールを開く→
GraphQL TS型生成開発者ツール

GraphQL スキーマ（SDL）やクエリから TypeScript の型定義、インターフェース、Enum、リゾルバーを自動生成。設定不要・サーバー送信なしでブラウザ上で即座にコード生成できます。

ツールを開く→
HTML Markdown変換開発者ツール

HTMLやWebクリップをGitHub Flavored Markdown（GFM）に瞬時に変換。インラインスタイルを除去し、テーブルやコードブロックをクリーンなMDファイルとして出力します。

ツールを開く→
テキスト差分比較ツール開発者ツール

テキスト、コード、設定ファイルの差分を高速比較。左右分割やインラインでの文字単位の変更確認、空白の無視、Unified Diff（.patch）の出力に対応。

ツールを開く→
カノニカルタグ生成ツール開発者ツール

有効なrel=canonicalタグやHTTPレスポンスヘッダーを瞬時に作成。不要な追跡パラメータの削除、URL正規化、重複コンテンツによるSEO評価の分散を確実に防止します。

ツールを開く→
cURLをFetchに変換開発者ツール

cURLコマンドを一瞬でFetch APIコードに変換。HTTPヘッダー、認証トークン、Cookie、JSONペイロードを自動解析し、最新のasync/await対応JavaScriptコードを生成します。

ツールを開く→