Универсальная подсветка кода и кнопка «Копировать» для любых сайтов

Универсальная подсветка кода и кнопка «Копировать» для любых сайтов

В любой технической статье примеры кода играют огромную роль. Но если этот код выглядит серым, скучным и слипшимся — читатель страдает, а ты теряешь качество подачи. Подсветка синтаксиса делает текст понятным, аккуратным и профессиональным, а кнопка «Копировать» экономит время тем, кто хочет забрать пример себе.

Главное преимущество решения в том, что оно работает полностью автоматически. Никаких правок старых статей, никаких новых разметок. Любой код, который у тебя уже был вставлен в <pre>, станет красивым и удобным.

Для чего это нужно

Подсветка кода:

• делает статью визуально чище
• помогает читателю быстрее понимать примеры
• увеличивает качество восприятия материала
• повышает доверие к сайту
• улучшает UX для разработчиков и технарей

Кнопка «Копировать» помогает:

• быстро забрать весь код одним кликом
• не выделять текст вручную
• не копировать лишние пробелы и элементы оформления

Это особенно полезно в блогах, документациях, инструкциях, туториалах, статьях с примерами HTML, JS, PHP, CSS и других языков.

Как установить

Вставь код ниже в нижнюю часть сайта(футер), прямо перед </body>.
Он содержит сразу обе функции:
автоматическую подсветку синтаксиса через Highlight.js и кнопку копирования.

Код для подключения подсветки и кнопки

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
 document.querySelectorAll("pre").forEach(function (pre) {
 if (pre.dataset.hlProcessed === "1") return;
 pre.dataset.hlProcessed = "1";

 var code = pre.querySelector("code");

 if (!code) {
 code = document.createElement("code");
 var text = pre.textContent.replace(/^\n+/, "").replace(/\s+$/, "");
 code.textContent = text;
 pre.innerHTML = "";
 pre.appendChild(code);
 }

 var btn = document.createElement("button");
 btn.className = "copy-code-button";

 var icon = document.createElement("i");
 icon.className = "bi bi-clipboard";

 var label = document.createTextNode(" Копировать");

 btn.appendChild(icon);
 btn.appendChild(label);

 pre.prepend(btn);

 btn.addEventListener("click", function () {
 var clone = pre.cloneNode(true);
 var btnInside = clone.querySelector(".copy-code-button");
 if (btnInside) btnInside.remove();

 var txt = clone.innerText;

 navigator.clipboard.writeText(txt).then(function () {
 btn.classList.add("copied");
 icon.className = "bi bi-check-lg";
 label.textContent = " Скопировано!";
 setTimeout(function () {
 btn.classList.remove("copied");
 icon.className = "bi bi-clipboard";
 label.textContent = " Копировать";
 }, 2000);
 });
 });

 hljs.highlightElement(code);
 });
});
</script>

Стили кнопки (работают везде, даже без Bootstrap)

Если у вас подключен Bootstrap — кнопка возьмёт часть его оформления.
Если Bootstrap отсутствует — стили ниже обеспечат нормальный вид на любом сайте.

Добавить в CSS:

.copy-code-button {
 position: absolute;
 top: 8px;
 right: 8px;
 padding: 4px 10px;
 font-size: 12px;
 background: #2d2d2d;
 color: #fff;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 display: flex;
 align-items: center;
 gap: 4px;
 opacity: 0.8;
 transition: 0.2s;
 z-index: 2;
}

.copy-code-button:hover {
 opacity: 1;
}

pre {
 position: relative;
 padding-top: 36px;
}

Эти стили:

• обеспечивают аккуратный внешний вид кнопки
• добавляют отступ сверху, чтобы кнопка не перекрывала текст
• гарантируют корректное отображение иконки и текста
• работают в любом дизайне, независимо от фреймворков

Заключение

Теперь весь код в ваших статьях автоматически отображается красиво благодаря подсветке, а читатели могут мгновенно копировать его одной кнопкой. Это улучшает удобство, повышает качество блога и делает примеры кода профессиональными.

Решение универсальное и работает на любых сайтах, включая uCoz, статические блоги, самописные движки, документации и обучающие проекты.