如何在Azure DevOps Wiki页面中嵌入复制按钮功能？

完全可以实现，核心是利用Azure Wiki支持的HTML内嵌能力，搭配原生JavaScript完成复制功能，无需依赖外部资源，具体实现如下：

实现步骤 #

1. 打开Azure Wiki页面，切换编辑器到HTML模式（点击工具栏的「<>」图标）
2. 插入以下代码，替换示例中的代码内容为你需要展示的文本：

<div style="position: relative; margin-bottom: 16px;">
  <button onclick="copyCode(this)" style="position: absolute; top: 8px; right: 8px; padding: 4px 8px; cursor: pointer; background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 4px; font-size: 12px;">复制</button>
  <pre style="padding: 16px; background: #f9fafb; border-radius: 6px; overflow-x: auto;">
    <code>
# 替换为你的目标内容
echo "Hello Azure Wiki"
    </code>
  </pre>
</div>

<script>
function copyCode(btn) {
  const codeBlock = btn.nextElementSibling.querySelector('code');
  const text = codeBlock.textContent.trim();
  
  navigator.clipboard.writeText(text).then(() => {
    const originalText = btn.textContent;
    btn.textContent = "已复制";
    setTimeout(() => btn.textContent = originalText, 1500);
  }).catch(() => {
    const originalText = btn.textContent;
    btn.textContent = "复制失败";
    setTimeout(() => btn.textContent = originalText, 1500);
  });
}
</script>

细节说明 #

• 按钮采用绝对定位固定在代码块右上角，样式可根据你的Wiki风格自定义（比如调整背景色、边框样式）
• 用浏览器原生的navigator.clipboard API实现复制，兼容性覆盖绝大多数现代浏览器
• 复制后按钮会临时切换文本提示状态，操作反馈更清晰
• 如果需要添加多个带复制按钮的代码块，直接重复上述div结构即可，JS逻辑会自动适配每个按钮对应的代码内容

注意事项 #

• 必须在HTML模式下插入代码，切换回可视化模式不会破坏结构
• 若遇到复制失败的情况，检查浏览器是否允许剪贴板权限（Azure Wiki的访问环境一般默认允许）

内容的提问来源于stack exchange，提问作者Afi