直接将多图塞进 会导致图片不渲染（ 仅显示文本）；放 外易被 css 截断或错位；正确做法是用 + 语义化 包裹图文混排内容。
details 标签里直接放 会出什么问题
直接把多图（比如多个 @@##@@）塞进 <details><pre class="brush:php;toolbar:false;"><code></code> 里，浏览器会报错或渲染异常——因为 <code><code></code> 是纯文本容器，不解析 HTML 标签，<code>@@##@@</code> 只会当字符串显示，不会加载图片；而如果把 <code>@@##@@</code> 放在 <code><pre class="brush:php;toolbar:false;"></pre> 外但仍在 <details></details> 内，又容易被 CSS 的 white-space: pre 或 overflow 截断，图片错位或不显示。
正确结构：details + div 包裹图文混合内容
必须跳出「代码块只能用 <pre class="brush:php;toolbar:false;"><code></code>」的思维。要展示含图的说明性内容，就该用语义化组合：</pre>
-
<details></details>控制显隐 -
<summary></summary>写标题或提示文字 <div>（非 <code><pre class="brush:php;toolbar:false;"></pre>）作为内容容器，里面自由排布@@##@@、<p></p>、<code>等示例：
<pre class="brush:php;toolbar:false;"><details><summary>点击查看组件结构图与关键代码</summary><div> <p>下图展示了 React 组件层级关系：</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> @@##@@ <p>核心渲染逻辑如下：</p> <pre class="brush:php;toolbar:false;"><code>function Header({ title }) { return <h1>{title}</h1>; }</code>
