第二步：渲染引擎落地——让Markdown实时变HTML

npm install markdown-it dompurify highlight.js
# 或使用 pnpm/yarn

import MarkdownIt from 'markdown-it';

// 创建默认配置实例（已禁用 HTML 标签解析）
const md = new MarkdownIt({
  html: false,      // 🔒 关键！禁止原始 HTML 解析
  xhtmlOut: true,   // 输出自闭合标签（如 <br />），更规范
  breaks: false,    // 暂不启用 \n → <br>（避免干扰列表/代码块）
  langPrefix: 'language-', // 为 <code> 添加 class 前缀，便于高亮
});

const input = '# Hello\n\n- Item 1\n- Item 2';
const html = md.render(input);

console.log(html);
// 输出：
// <h1>Hello</h1>
// <ul>
// <li>Item 1</li>
// <li>Item 2</li>
// </ul>

const textarea = document.getElementById('md-input');
const preview = document.getElementById('html-preview');
const md = new MarkdownIt({ html: false });

let debounceTimer;
textarea.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    try {
      const html = md.render(textarea.value);
      // ⚠️ 此处仍不安全！待第4节加固后才可赋值
      preview.innerHTML = html; 
    } catch (err) {
      preview.textContent = '⚠️ 解析错误，请检查语法';
    }
  }, 300); // 推荐 200–500ms：短于 200ms 易卡顿，长于 500ms 感知延迟明显
});

[点击](javascript:alert('xss'))
<img src=x onerror=alert(1)>

npm install dompurify

import DOMPurify from 'dompurify';

// 渲染后立即净化
preview.innerHTML = DOMPurify.sanitize(html);

// ✅ DOMPurify 默认白名单：仅保留 <h1>~<h6>, <p>, <ul>, <ol>, <li>, <pre><code>, <strong> 等语义化标签
// ✅ 自动移除 javascript:、onerror、style="background:url(javascript:..." 等危险属性

const md = new MarkdownIt({
  html: false,        // 禁用原始 HTML 解析（默认即 true）
  typographer: false, // 禁用智能引号等富文本转换（减少潜在注入面）
  linkify: false,     // 禁用自动链接（避免 `http://x.com` 被包裹为 <a>）
});

npm install highlight.js
# 加载主题 CSS（Vite 中可直接 import）
import 'highlight.js/styles/github-dark.css';

import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
import python from 'highlight.js/lib/languages/python';
import css from 'highlight.js/lib/languages/css';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('typescript', typescript);
hljs.registerLanguage('python', python);
hljs.registerLanguage('css', css);

const md = new MarkdownIt({
  highlight: (str, lang) => {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value;
      } catch (e) {
        console.warn(`Highlight failed for ${lang}:`, e);
      }
    }
    return md.utils.escapeHtml(str); // 降级为转义
  }
});

textarea.addEventListener('input', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
    console.time('markdown-render');
    try {
      const html = md.render(textarea.value);
      console.timeEnd('markdown-render'); // 如 "markdown-render: 8.23ms"

      // 超长文本降级（>50KB 时改用 textContent 提示）
      if (textarea.value.length > 50 * 1024) {
        preview.textContent = '📝 文档过长，已切换为纯文本预览（支持 Ctrl+F 搜索）';
        return;
      }

      preview.innerHTML = DOMPurify.sanitize(html);
    } catch (err) {
      console.error('Markdown parse error:', err);
      preview.textContent = '⚠️ 解析失败，请检查语法（可能含未闭合的 ``` 或 $）';
    }
  }, 300);
});

// worker.js
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt();
self.onmessage = ({ data }) => {
  self.postMessage({ html: md.render(data) });
};