Как добавить кнопку копирования в тег ngx-markdown в angular

Я хочу добавить кнопку копирования, когда в ответ будет код, как показано ниже.

пожалуйста, посмотрите мое загруженное изображение, чего я хочу.

<markdown  class = "variable-binding" [data] = "markdown"></markdown>
  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`;
}

Я использую этот код. Я хочу, чтобы в ответ был код типа изображения, а затем отображалась кнопка копирования, чтобы копировать только предоставленный код, например кнопку копирования чата GBT.

Нажмите здесь, чтобы увидеть код стека Bizz

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
173
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Функциональность копирования в буфер обмена обеспечивается ngx-markdown. Вам необходимо его настроить.

Шаг: 1. Чтобы добавить библиотеку буфера обмена в package.json, используйте следующую команду.

npm install clipboard@^2.0.11 --save

Шаг: 2. Чтобы активировать буфер обмена, позволяющий копирование в буфер обмена, вам необходимо включить в пример angular.json ниже...

"scripts": [
  "node_modules/clipboard/dist/clipboard.min.js",
]

Шаг: 3. Плагин буфера обмена

<markdown clipboard class = "variable-binding" [data] = "markdown"></markdown>

Ссылка: ngx-markdown

Другие вопросы по теме