文章排版四件套（参考 xLog）：盘古之白 + 表格圆角斑马纹 + 代码块封顶与复制按钮 + 标题悬停锚点

- PanguHTML：CJK 与拉丁/数字间补空格，标签原样保留、code/pre 内文本不动；详情/时间线短文/RSS 描述三个出口生效（带单测）
- 表格改圆角容器 + tbody 斑马纹 + 纵向大留白（classic/vivid 双主题）
- pre max-height 30.5em 封顶内部滚动；enhanceProse 注入悬停复制按钮（App 全局委托），按下有 2px 物理感
- 带 id 的 h2-h4 悬停浮现 # 锚点，点击跳转
- 中文字体栈此前已配（PingFang SC 等），无需改动

frontend/src/utils.js

@@ -3,7 +3,7 @@ import DOMPurify from 'dompurify'
 // 后端 goldmark 已转义原始 HTML，这里再过一道 DOMPurify 作纵深防御，
 // 所有 v-html 出口必须经过它。
 export function sanitizeHtml(html) {
-  return DOMPurify.sanitize(html || '')
+  return enhanceProse(DOMPurify.sanitize(html || ''))
 }
 
 // ---------- 缩略图 ----------
@@ -28,6 +28,26 @@ export function thumbURL(u, w = 480) {
   return '/uploads/thumb/' + key + '?w=' + w
 }
 
+// ---------- xLog 式排版增强 ----------
+// 对消毒后的正文 HTML 做三件展示层增强（markdown/库里内容不动）：
+// 1) pre 包一层容器并注入悬停复制按钮；
+// 2) 带 id 的标题（withHeadingIds 生成）尾部加 # 锚点；
+// 3) （盘古之白在后端渲染出口做，见 backend/internal/render/pangu.go）
+export function enhanceProse(html) {
+  if (!html) return html
+  // 复制按钮：包在 .pre-wrap 里，按钮悬浮于 pre 右上
+  html = html
+    .replace(/<pre\b/g, '<div class="pre-wrap"><button type="button" class="pre-copy" aria-label="复制代码">复制</button><pre')
+    .replace(/<\/pre>/g, '</pre></div>')
+  // 标题锚点：h2-h4 且有 id 的，末尾补一个 # 链接（悬停浮现）
+  html = html.replace(
+    /<h([2-4])([^>]*\bid="([^"]+)"[^>]*)>([\s\S]*?)<\/h\1>/g,
+    (m, lvl, attrs, id, inner) =>
+      `<h${lvl}${attrs}>${inner}<a class="h-anchor" href="#${id}" aria-label="标题链接">#</a></h${lvl}>`
+  )
+  return html
+}
+
 // 编辑器拖拽缩放的比例展示：Milkdown 图片块把高度比例写进 markdown 的 alt
 // （![0.6](url)），渲染出的 <img alt="0.6"> 在这里还原成对应的宽度并居中。
 // 纯数字 alt 才生效（>=1 的当 100% 处理），正常图片的描述性 alt 不受影响。