Код highlight

Компонент код highlight красиво стилизует содержимое тега <code> и дает возможность его скопировать.

./src/pug/components/code.pug
JS
const test = (value) => {
  let x = value;

  returt x++;
}

Вызов компонента

PUG
+code("js").
  const test = (value) => {
    let x = value;

    returt x++;
  }

Содержимое компонента

PUG
mixin code(language="html")
  - var title = language.toUpperCase();

  .code-block
    .code-block__header
      .code-block__name 
      button.code-block__button(data-clipboard-action="copy", aria-label="Скопировать в буфер обмена") Копировать
    .code-block__content
      pre
        code(class=language)
          if block
            block

Сборка компонента

HTML
<div class="code-block">
  <div class="code-block__header">
    <div class="code-block__name">JS</div>
    <button
      class="code-block__button"
      data-clipboard-action="copy"
      aria-label="Скопировать в буфер обмена"
    >
      Копировать
    </button>
  </div>
  <div class="code-block__content">
    <pre><code class="js hljs language-javascript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">test</span> = (<span class="hljs-params">value</span>) => {
      <span class="hljs-keyword">let</span> x = value;

      returt x++;
    }
    </code></pre>
  </div>
</div>

Используемый js код:

Файл: ./src/js/components/code-block.js

JS
import Clipboard from "clipboard";

const code = () => {
  const clipboard = new Clipboard(".code-block__button", {
    target: (trigger) => trigger.parentElement.nextElementSibling,
  });

  clipboard.on("success", (evt) => {
    let { text } = evt;

    if (text[0] === "$") {
      text = text.replaceAll("$ ", "");
    }

    navigator.clipboard.writeText(text);

    evt.clearSelection();
  });
};

export default code;

Файл: ./src/js/main.js

JS
import hljs from "highlight.js/lib/common";
import code from "@/components/code";

hljs.highlightAll();
code();