直接用navigator.clipboard.writeText()复制code标签内容可行，关键要用textContent取原始文本（含换行缩进），禁用innerText；须HTTPS/localhost环境、绑定click事件触发，避免异步调用；高亮后结构破坏时可存data-raw属性兜底。
直接用 navigator.clipboard.writeText() 复制 code 标签内容
能用原生 API 就别绕路——navigator.clipboard.writeText() 是当前最干净、最可控的方式，只要页面是 HTTPS 或 localhost，且绑定在用户点击上，就能把 code 标签里的原始文本（含换行缩进）完整复制过去。
关键不是“能不能”，而是“怎么取才不丢格式”：必须用 textContent，不能用 innerText。后者会把多个空格压成一个、把 \n 当成渲染换行而忽略，导致粘贴后缩进全乱。
- 确保目标元素是原始
code节点，不是被 Prism.js 或高亮库包裹后的span嵌套结构 - 如果
code在pre里，直接选它：document.querySelector('pre code')，再取.textContent - 避免在
setTimeout或fetch.then里调用，否则失去用户手势上下文，Chrome/Firefox 直接抛SecurityError
code 标签嵌套在高亮组件中复制失败怎么办
很多代码块经过 Prism.js、highlight.js 渲染后，原始 code 元素已被替换成一堆带 class 的 span，此时 textContent 还能用，但内容可能混入额外空格或换行错位。
更稳的做法是：提前把原始代码字符串存到 data-raw 属性里，复制时直接读它，完全绕过高亮干扰。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 服务端渲染或构建时注入：
<code data-raw="def hello():\n print("hi")">...</code> - 前端动态生成时，在插入高亮 HTML 前先缓存原始字符串
- 不要依赖
innerHTML提取，它返回的是带标签的 HTML 字符串，粘贴后会显示为乱码
按钮点击后没反应，控制台报 Permission denied
这个错误几乎只说明一件事：API 调用不在合法上下文中。不是浏览器不支持，而是你触发它的姿势错了。
常见非法场景包括：
- 页面加载完自动执行：
document.addEventListener('DOMContentLoaded', () => navigator.clipboard.writeText(...)) - HTTP 协议下运行（非 HTTPS / localhost），连 API 都未定义，
navigator.clipboard是undefined - 按钮在 iframe 里，但 iframe 缺少
sandbox="allow-scripts allow-same-origin"和allow="clipboard-write" - 用了
onclick="copyCode()"写法，但函数在全局作用域重复声明，导致实际绑定的是最后一个定义（尤其多个代码块共用同名函数时）
需要兼容 IE11 或旧安卓 WebView 怎么办
现代方案跑不通时，只能回退到 textarea + execCommand('copy')，但它不是“简单加个 fallback”就完事——细节决定成败。
IE11 下必须满足三个硬条件：元素得在 DOM 中、得 visible（不能 display: none 或 opacity: 0）、得 focus() 后再 select()，否则静默失败。
- 临时
textarea要设position: fixed; left: -9999px;，避免布局抖动和屏幕阅读器误读 - 复制完立刻
remove()，别留着占内存或干扰后续操作 -
execCommand('copy')已废弃，Chrome 63+ 开始拒绝写入权限，仅作为 IE11 最终兜底，别在新项目里当主力方案
真正容易被忽略的点是：多代码块场景下，每个按钮必须绑定自己对应的 code 元素，而不是靠闭包或全局变量“猜”该复制哪一段——作用域污染和事件监听覆盖比兼容性问题更早让你掉坑里。
