Как интегрировать копирование в буфер обмена с помощью Rainbow Syntax Highlighter

Я пытаюсь интегрировать базовую функцию «копировать в буфер обмена» с библиотекой подсветки синтаксиса Rainbow. Каждый фрагмент кода на странице выделяется цветом и может быть скопирован в буфер обмена нажатием кнопки «Копировать». Кнопки копирования — это обычная функциональность, и я не хочу использовать другой плагин для чего-то такого простого. Я попытался использовать приведенный ниже сценарий API буфера обмена, который отлично работает сам по себе, но когда Rainbow запущена, функция копирования больше не работает (и в консоли не выводятся ошибки). Может ли кто-нибудь помочь мне интегрировать приведенный ниже скрипт с библиотекой подсветки Rainbow?

Репозиторий радуги:https://github.com/ccampbell/rainbow

Пример необработанного HTML:

      <pre class="lang-html" tabindex="0"><code data-language="html">
<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>
</code></pre>

Пример вывода Raw HTML с помощью Rainbow:

      <pre class="lang-html rainbow-show" tabindex="0" data-trimmed="true"><code data-language="html" class="rainbow rainbow-show">
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">container</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">row</span><span class="string quote">"</span><span class="support tag close">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Column 1<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Column 2<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
      <span class="support tag"><span class="support tag">&lt;</span><span class="support tag-name">div</span></span> <span class="support attribute">class</span><span class="support operator">=</span><span class="string quote">"</span><span class="string value">col</span><span class="string quote">"</span><span class="support tag close">&gt;</span>Column 3<span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
    <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
  <span class="support tag"><span class="support tag">&lt;</span><span class="support tag special">/</span><span class="support tag-name">div</span></span><span class="support tag close">&gt;</span>
</code><button class="btn btn-secondary2">Copy</button><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></pre>

Скопировать в буфер обмена Скрипт:

      const copyButtonLabel = "Copy";
// use a class selector if available
let blocks = document.querySelectorAll("pre.lang-html");
blocks.forEach((block) => {
  // only add button if browser supports Clipboard API
  if (navigator.clipboard) {
    let button = document.createElement("button");
    $(button).addClass( "btn btn-secondary2" );
    button.innerText = copyButtonLabel;
    block.appendChild(button);
    button.addEventListener("click", async () => {
      await copyCode(block, button);
    });
  }
});

async function copyCode(block, button) {
  let code = block.querySelector("code");
  let text = code.innerText;
  await navigator.clipboard.writeText(text);
  // visual feedback that task is completed
  button.innerText = "Copied";
  setTimeout(() => {
    button.innerText = copyButtonLabel;
  }, 700);
}
Источник

1 ответ

Для других, которые сталкиваются с той же проблемой: я не смог найти решение для Rainbow, которое успешно интегрирует копирование в буфер обмена. Итак, вместо этого я переключился на библиотеку Prism, и описанная выше функция копирования работает отлично!

Вот статья об этом подробнее... https://www.roboleary.net/2022/01/13/copy-code-to-clipboard-blog.html

Источник
Другие вопросы по тегам