怎么利用HTML的marked.js库将Markdown文本解析渲染为HTML内容-html教程-PHP中文网

直接调用marked.parse()即可转换，但需先确保库已加载且避免旧版api习惯；v4+版本禁止直接调用marked()，必须显式使用parse方法，并推荐配合setoptions配置基础行为。

怎么利用html的marked.js库将markdown文本解析渲染为html内容

直接调用 `marked.parse()` 就能转，但别漏掉初始化

浏览器里用 marked.js 解析 Markdown，核心就一句：marked.parse()。但它不是开箱即用——你得先确保库已加载，且没被旧版 API 习惯带偏。常见错误是写成 marked(text, options)，这在 v4+ 版本里会报 TypeError: marked is not a function。新版必须显式调用 parse 方法。

推荐做法是：CDN 引入后，立刻用 marked.setOptions() 设好基础行为，再调 marked.parse()。比如启用换行符转 <br>、标题自动加 ID：

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><script>
  marked.setOptions({
    gfm: true,
    breaks: true,
    headerIds: true,
    mangle: false
  });
  const html = marked.parse('# Hello\n\nThis is **bold**.');
  document.getElementById('content').innerHTML = html;
</script>

加载外部 `.md` 文件时，`fetch` 的 MIME 类型要配对

用 fetch('doc.md') 加载本地 Markdown 文件，看似简单，实际容易卡在跨域或 MIME 拒绝上。开发服务器（如 Vite、Webpack Dev Server）默认不把 .md 当文本返回，Chrome 会直接拒绝解析，控制台报错：Failed to fetch 或 Content-Type is not text/plain。

解决办法分两步：

确保服务端响应头含 Content-Type: text/plain（Vite 用户可在 vite.config.js 中加 server.headers 配置）
fetch 后明确用 .text() 读取，别用 .json() 或漏掉 Promise 链

正确写法：

Wjs Syncing Multicam

当用户拥有两个或以上不同设备录制的同一事件视频/音频，并希望将它们同步或合并时使用。

下载

fetch('article.md')
  .then(r => {
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    return r.text();
  })
  .then(mdText => {
    document.getElementById('content').innerHTML = marked.parse(mdText);
  })
  .catch(err => console.error('Load failed:', err));

渲染含代码块的 Markdown 时，`highlight.js` 必须手动激活

marked.js 自身不处理语法高亮，它只生成带 <pre class="brush:php;toolbar:false;"><code class="js"></code> 这类结构的 HTML。如果你发现代码块全是纯白底黑字、没颜色，问题不在 <code>marked</code>，而在没接高亮库。</pre>

必须额外引入 highlight.js 并显式调用 hljs.highlightAll()：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/github.min.css"><script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/lib/core.min.js"></script><script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/lib/languages/javascript.min.js"></script><script>hljs.highlightAll();</script>

注意：这个调用必须放在 marked.parse() 插入 DOM 之后，否则 highlightAll() 找不到新生成的 <code> 元素。

用户输入的 Markdown 渲染前，`DOMPurify.sanitize()` 不是可选项

直接把 marked.parse(userInput) 结果塞进 innerHTML 是高危操作。Markdown 允许内嵌原始 HTML，攻击者可以写 [xss](javascript:alert(1)) 或更隐蔽的 <img src="x" onerror="...">。虽然旧版 marked 提供 sanitize: true，但它已被弃用且不覆盖所有 XSS 向量。

必须用专业净化库，最常用的是 DOMPurify：

<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script><script>
  const unsafeHtml = marked.parse(userInput);
  const safeHtml = DOMPurify.sanitize(unsafeHtml);
  el.innerHTML = safeHtml;
</script>

关键点：不要跳过这步，哪怕内容来自可信后台；DOMPurify 要在 marked.parse() 之后立即执行，不能合并到同一行或延迟。

真正麻烦的不是怎么转，而是转完之后谁来管 HTML 安全、代码高亮、服务端 MIME 配置这些边界问题——它们不出错时看不见，一出就是线上事故。