如何在Angular的ngx-markdown标签中添加代码复制按钮

实现步骤 #

1. 修改模板绑定渲染完成事件 #

在markdown组件上添加afterRender事件监听，确保在内容渲染完成后再添加复制按钮：

<markdown 
  class="variable-binding" 
  [data]="markdown"
  (afterRender)="onMarkdownRendered()"
></markdown>

2. 编写组件逻辑 #

使用Angular CDK的剪贴板服务实现复制功能，遍历所有代码块并注入复制按钮：

import { Component } from '@angular/core';
import { Clipboard } from '@angular/cdk/clipboard';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  markdown = `## Markdown __rulez__!
---

### Syntax highlight
\`\`\`typescript
const language = 'typescript';
\`\`\`

### Lists
1. Ordered list
2. Another bullet point
   - Unordered list
   - Another unordered bullet

### Blockquote
> Blockquote to the max`;

  constructor(private clipboard: Clipboard) {}

  onMarkdownRendered(): void {
    const codeBlocks = document.querySelectorAll('pre');
    codeBlocks.forEach((pre) => {
      // 避免重复添加按钮
      if (pre.querySelector('.copy-btn')) return;

      const copyBtn = document.createElement('button');
      copyBtn.className = 'copy-btn';
      copyBtn.textContent = '复制';
      copyBtn.title = '复制代码';

      copyBtn.addEventListener('click', () => {
        const codeElement = pre.querySelector('code');
        if (codeElement) {
          this.clipboard.copy(codeElement.textContent || '');
          // 提示复制成功
          copyBtn.textContent = '已复制';
          setTimeout(() => copyBtn.textContent = '复制', 1500);
        }
      });

      pre.appendChild(copyBtn);
    });
  }
}

3. 添加样式 #

给代码块和复制按钮添加样式，实现右上角悬浮按钮的布局效果：

pre {
  position: relative;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow-x: auto;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 4px;
  background-color: #e0e0e0;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background-color 0.2s;
}

.copy-btn:hover {
  background-color: #bdbdbd;
}

4. 依赖配置 #

• 安装Angular CDK：执行命令 ng add @angular/cdk
• 在模块中导入剪贴板模块：

import { ClipboardModule } from '@angular/cdk/clipboard';

@NgModule({
  imports: [
    // 其他已导入模块
    ClipboardModule
  ]
})
export class AppModule {}

注意事项 #

• 若markdown内容为动态更新，需在内容变更后手动调用onMarkdownRendered()方法
• 若使用了ngx-markdown的语法高亮插件，可根据高亮主题调整按钮的背景色和文字色，保证视觉协调

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