无法直接渲染latex公式，需配合katex等库动态渲染；应将公式存于data-latex属性，展开时调用katex.render()并设displaymode:true，注释须置于math-block外。
<details></details> 本身不支持直接渲染 LaTeX 或 MathML 公式，强行塞进去只会显示原始代码或乱码。必须配合数学渲染库（如 KaTeX 或 MathJax）在展开后动态渲染，否则公式根本不会正确显示。
为什么直接写 <details><summary>E=mc²</summary><p>E = m c^2</p></details> 不行
浏览器原生不解析 LaTeX 语法；<details></details> 展开时内容只是“可见”，但未触发数学库的渲染流程。常见现象是：展开后看到一串 E = m c^2 文本，或者 \frac{1}{2}mv^2 这样的源码，而不是排版好的分数和上标。
- MathJax 默认只在页面加载时扫描一次
，动态插入的内容不会自动处理 - KaTeX 要求显式调用
katex.render()，且目标元素必须为空或仅含纯文本 -
<summary></summary>里不能放复杂 HTML，否则部分浏览器会忽略或截断
用 KaTeX + details 实现可展开公式（推荐方案）
核心思路：把公式源码存在 data-latex 属性里，展开后读取、清空容器、再调用 katex.render() 渲染。注释可放在同个 <div> 里用普通 HTML 写。
<pre class="brush:php;toolbar:false;"><details><summary>动能公式</summary><div class="math-block" data-latex="\frac{1}{2}mv^2"></div>
<p>其中：<code>m</code> 是质量（kg），<code>v</code> 是速度（m/s）</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5806" title="html-deploy"><img
src="https://img.php.cn/upload/skill/000/000/081/179066538882434.jpg" alt="html-deploy" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="overflowclass">html-deploy</a>
<p class="overflowclass">使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5806" title="html-deploy" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</details></pre>
<p>配合 JS（需提前引入 KaTeX CSS 和 JS）：</p>
<pre class="brush:php;toolbar:false;">document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('details').forEach(details => {
details.addEventListener('toggle', () => {
if (details.open) {
const block = details.querySelector('.math-block');
if (block && !block.hasAttribute('data-rendered')) {
katex.render(block.dataset.latex, block, { displayMode: true });
block.setAttribute('data-rendered', 'true');
}
}
});
});
});</pre>
<h3>兼容性与易踩坑点</h3>
<p>细节决定成败——这些地方出错会导致公式空白或报错：</p>
<ul>
<li>确保 <code>katex.render() 的第二个参数是 DOM 元素，不是字符串或 jQuery 对象
displayMode: true 必须加，否则行内公式会挤在一行，分式、求和号等无法居中展开<div class="math-block"> 里预先写任何文字或标签，KaTeX 会清空它；注释必须放在外面
<li>Safari 对 <code>details[toggle] 事件支持较晚，iOS 15.4+ 才稳定；老版本可用 setTimeout 延迟渲染作为降级<details></details>，每个都要独立判断 data-rendered，避免重复调用 render() 报错最常被忽略的是：公式渲染依赖字体文件加载完成。若网络慢或 KaTeX 字体路径配错，会出现方块或缺失符号——建议检查浏览器控制台是否有 404 字体请求，并确认 katex.min.css 已正确引入。
