Как оформить код в Blogger

Перед тем как перейти к коду, давай коротко разберёмся, что мы вообще собираемся сделать. Мы добавим в Blogger аккуратное оформление для вставок кода - с рамкой, приятными цветами и кнопкой «Скопировать». Всё будет работать без сторонних плагинов и лишних скриптов - только стандартный HTML, немного CSS и JavaScript. По сути, это маленькое улучшение, которое делает блог чище и удобнее для читателей.

Кто хоть раз вставлял код в Blogger, знает - по умолчанию он выглядит скучно. Серый текст, без отступов, без рамки, всё сливается. А хочется, чтобы было аккуратно - как на нормальных сайтах. Покажу, как оформить код красиво и удобно прямо в Blogger как у меня.

Содержание статьи

• Базовая разметка
• Подключаем Font Awesome
• Добавляем кнопку копирования
• Оформляем блок кода
• Для чего всё это

Базовая разметка

Начнём с самого простого - создадим блок, где будет находиться код. Для этого нужны два тега: <pre> и <code>. Первый отвечает за отступы и переносы, второй - просто говорит браузеру, что внутри код.

Атрибут data-lang можно добавить, чтобы подсвечивать рамкой язык (CSS, HTML, Python и т.д.).

<pre data-lang="css"><code>
body {
  background: #fff;
  color: #333;
}
</code></pre>

Пока это выглядит просто, но на этих тегах держится всё оформление и скрипт копирования. Без них кнопка работать не будет.

Подключаем Font Awesome

Чтобы кнопка копирования выглядела красиво, нужен шрифт с иконками. Добавь перед </head> в шаблон Blogger эту строку:

<!-- Font Awesome 4.7 для иконок -->
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

Теперь появятся иконки с надписью в правом верхнем углу: - при наведении, - после копирования. Эта версия лёгкая, стабильная и проверенная годами.

Добавляем кнопку копирования

А теперь самое интересное. Нам нужен маленький скрипт, который добавит кнопку в каждый блок кода и будет копировать текст в буфер обмена. Вставь этот <script> с кодом перед закрывающим тегом </body>

<script>
document.querySelectorAll("pre code").forEach(block => {
  const pre = block.parentElement;
  const wrapper = pre.closest(".code-container") || document.createElement("div");
  if (!wrapper.classList.contains("code-container")) {
    wrapper.className = "code-container";
    pre.parentNode.insertBefore(wrapper, pre);
    wrapper.appendChild(pre);
  }

  const btn = document.createElement("button");
  btn.className = "copy-button fa fa-copy";
  
  const text = document.createElement("span");
  text.textContent = "Copy"; // надпись рядом с иконкой
  btn.appendChild(text);

  btn.addEventListener("click", async () => {
    try {
      await navigator.clipboard.writeText(block.textContent);
      btn.className = "copy-button fa fa-check copied";
      text.textContent = "Copied!";
      setTimeout(() => {
        btn.className = "copy-button fa fa-copy";
        text.textContent = "Copy";
      }, 1500);
    } catch (e) {
      console.error("Ошибка копирования:", e);
    }
  });

  wrapper.appendChild(btn);
});
</script>

Сохрани изменения и обнови страницу. При наведении на блок появится значок копирования - нажимаешь, и код уходит в буфер. Всё просто и аккуратно.

Оформляем блок кода

Чтобы код выглядел аккуратно, добавим немного стилей. Они делают фон, рамку и кнопку копирования удобными и читабельными.

Вставь этот CSS в шаблон Blogger: Тема → Изменить HTML перед тегом ]]></b:skin>.

pre {
  background-color: #f8f9fa;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  max-width: 100%;
}

pre.dark {
  background-color: #2d3748;
  border-color: #4a5568;
  color: #e2e8f0;
}

code {
  background-color: #f1f3f4;
  color: #d73a49;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  border: 1px solid #ddd;
}

pre code {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
}

pre[data-lang="javascript"] { border-left: 4px solid #f7df1e; }
pre[data-lang="python"] { border-left: 4px solid #3776ab; }
pre[data-lang="css"] { border-left: 4px solid #1572b6; }
pre[data-lang="html"] { border-left: 4px solid #e34f26; }

Добавь также CSS для кнопки:

.code-container {
  position: relative;
  margin: 16px 0;
}
.code-container pre {
  margin: 0;
}

.copy-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  color: #777;
  border: none;
  padding: 4px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.code-container:hover .copy-button {
  opacity: 1;
}
.copy-button:hover {
  color: #555;
  transform: translateY(-1px);
}
.copy-button:active {
  transform: translateY(0);
}
.copy-button.copied {
  color: #555;
}

Для чего всё это

Мелочь, но важная. Такой элемент делает блог аккуратнее и профессиональнее. Код читается, не рвёт вёрстку и копируется без танцев с бубном. Если ты делишься инструкциями, примерами или фрагментами CSS/HTML - эта штука экономит читателям секунды, а тебе добавляет очков за заботу о деталях.

Теперь у тебя чистый, удобный код в постах Blogger, без громоздких плагинов и внешних библиотек. Немного HTML, короткий скрипт и пара строк в шаблоне - и твои статьи выглядят на порядок лучше. Иногда всё действительно просто.