在index.html中集成Markdown渲染引擎：HTML动态文档生成-html教程-PHP中文网

直接用 marked.js 渲染出转义 html 是因默认开启 sanitize 且返回已转义字符串；需设 sanitize: false, allowdangeroushtml: true，并用 innerhtml 赋值而非 textcontent。

在index.html中集成markdown渲染引擎：html动态文档生成

为什么直接用 marked.js 会渲染出转义的 HTML 字符

常见现象是：你在 index.html 里写好 Markdown 文本，调用 marked() 得到字符串，但插入 innerHTML 后看到的是原始 HTML 标签（比如 <p>Hello</p>），而不是渲染后的段落。这是因为 marked() 默认开启 sanitize: true（v4+ 版本），且返回的是已转义的字符串；更关键的是——你可能没告诉它“别转义”，也没让浏览器真正解析 HTML。

实操建议：

显式关闭安全过滤：marked.setOptions({ sanitize: false, allowDangerousHtml: true })（v4.3+ 必须加 allowDangerousHtml: true 才允许原生 HTML 输出）
必须用 element.innerHTML = marked(markdownText)，不能用 textContent 或 innerText
若用 CDN 引入，确保加载顺序：先 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>，再执行初始化逻辑

如何从本地 .md 文件异步加载并渲染（不用服务端）

纯前端读取本地文件需绕过跨域限制，直接用 fetch('./doc.md') 在本地双击打开 index.html 时会失败（net::ERR_FILE_NOT_FOUND 或 CORS）。真实可行路径只有两条：走本地静态服务器，或把内容硬编码/内联为 JS 字符串。

实操建议：

开发阶段用 npx serve 或 python3 -m http.server 启一个本地服务，再 fetch('./README.md') 就能正常工作
若坚持双击运行，可将 Markdown 内容预存为 JS 变量：const mdContent = `# Title\n\n- item1\n- item2`; document.getElementById('preview').innerHTML = marked(mdContent);
避免用 XMLHttpRequest + 同步请求（已废弃），也别依赖 FileReader 让用户手动选文件——这不是“自动集成”的本意

渲染后代码块没高亮？prism.js 加载时机和触发方式

marked 本身不处理语法高亮，只生成带 <pre class="brush:php;toolbar:false;"><code class="js">...</code> 的结构。如果你看到灰扑扑的等宽字体，大概率是 <code>Prism.highlightAll()</code> 没执行，或 CSS 没加载，或 class 名不匹配。</pre>

Web fetch markdown of page

通过 jina.ai 将网页抓取为精简的 markdown，用于在需要获取 URL 并获取压缩的 markdown 内容以节省 token。触发词 l...

下载

实操建议：

确保在 marked() 渲染完成后再调用 Prism.highlightAll()，例如：

document.getElementById('preview').innerHTML = marked(mdText);
Prism.highlightAll();

引入 Prism 时要带对应语言包：<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
检查生成的 <code> 标签是否有 class="js" ——marked 默认不会加这个 class，得靠 renderer.code() 自定义，或用 highlight 选项传函数

Vue/React 项目里别直接操作 innerHTML

如果你实际是在 Vue 或 React 项目中动态渲染 Markdown，硬塞 innerHTML 不仅破坏框架的数据流，还会导致响应式失效、事件丢失、甚至 XSS 风险失控。这不是“集成”而是“绕过”。

实操建议：

Vue 用户优先用 v-html 指令：<div v-html="compiledMarkdown"></div>，配合 computed 或 watch 触发 marked()
React 用户用 {dangerouslySetInnerHTML: { __html: compiledMarkdown }}，但务必确认输入可信；生产环境建议用 react-markdown 这类专用组件
任何框架下都不要在 mounted/useEffect 里反复查 DOM、设 innerHTML、再调 Prism.highlightAll() —— 这类副作用应封装进自定义 Hook 或指令