Markdown を HTML に変換する方法

问题

Markdown のコンテンツを、Web ページで HTML として表示する必要があります。

前提条件

• Markdown 構文の理解
• HTML に関する知識

ステップ

1. 1. Parse the Markdown

   Use a Markdown parser to convert the text to an HTML AST. The parser handles headings, bold, italic, lists, code blocks, links, images, and tables. Choose a parser that supports the Markdown flavor you are using (CommonMark, GFM, MDX).

   入力

   # Hello\n**bold** text

   输出

   parsed AST

2. 2. Render to HTML

   Serialize the AST to HTML. The output includes appropriate HTML tags: <h1> for headings, <strong> for bold, <ul>/<li> for lists, <pre><code> for code blocks. Ensure the parser handles edge cases like nested lists and reference-style links.

   入力

   # Hello\n**bold**

   输出

   <h1>Hello</h1>\n<p><strong>bold</strong></p>

3. 3. Sanitize the HTML output

   Markdown can contain raw HTML, which is an XSS risk. Pass the output through an HTML sanitizer (like DOMPurify) that allows safe tags and attributes but removes scripts, event handlers, and dangerous URLs. Never render unsanitized Markdown HTML.

   入力

   raw HTML output

   输出

   sanitized, safe HTML

期待される結果

Markdown コンテンツを XSS の脆弱性なく描画する、安全な HTML。

よくあるエラー

Raw HTML in Markdown causes XSS

Use a Markdown parser that can disable raw HTML, or sanitize the output with an allowlist-based HTML sanitizer.

Markdown flavor not supported

Choose a parser that supports your flavor. GFM adds tables and strikethrough; CommonMark is the standard baseline.

トラブルシューティング指引

• If output looks wrong, check the Markdown flavor and parser options.
• If tables or other GFM features don't render, enable GFM support in the parser.

セキュリティ上の制限

• Always sanitize Markdown-to-HTML output. Raw HTML in Markdown is a common XSS vector.