Как вставить пример кода в веб-страницу

Обновлено 2026/06/11

Сегодня код — это не только текст, но и UX-элемент: он должен быть читаемым, копируемым, адаптивным и корректно индексируемым.

Разберём, как правильно отображать код на сайте: от базовой разметки до современных инструментов подсветки и интерактивных песочниц.

1. Базовый способ: <pre> + <code>

Классическая HTML-комбинация всё ещё актуальна и является фундаментом любой системы отображения кода. Связка сообщает поисковым системам: «Внутри технический текст, его не нужно переводить на другие языки в браузере».

• <code> — для коротких фрагментов (inline-код);
• <pre> — для сохранения форматирования (переносы, отступы).

Пример:

<pre>
<code>
function hello() {
console.log("Hello world");
}
</code>
</pre>

Важный нюанс

Чтобы браузер не «выполнил» код, символы нужно экранировать:

Пример:

<div>Hello</div>

Инструмент экранирования html-кода

HTML-coder преобразует специальные символы вашего кода в HTML-мнемоники (entities), чтобы код отображался на странице как текст, а не выполнялся браузером.

Инструмент поддерживает не только HTML, CSS и JavaScript, но и любой другой текст, содержащий специальные HTML-символы.

2. Скрипты автоматической подсветки синтаксиса

Сегодня никто вручную не пишет мнемоники для больших блоков кода. Используются библиотеки подсветки.

Highlight.js

• Автоматически определяет язык.
• Поддерживает десятки языков.
• Легко подключается без сборки.

Официальный сайт: highlight.js

Prism.js

• Модульная архитектура.
• Лёгкий вес.
• Гибкая кастомизация тем.

Официальный сайт: Prism.js

Что выбрать

• Простые сайты → Prism.js
• Документация / большие проекты → Highlight.js

3. Интерактивные песочницы

Статический код часто заменяют интерактивными вставками.

CodePen

CodePen

Используется для:

• HTML/CSS/JS демо.
• Живых примеров.
• UI-компонентов.

JSFiddle

JSFiddle

Подходит для:

• быстрых прототипов;
• тестирования логики.

StackBlitz

StackBlitz

Особенности:

• полноценные проекты;
• поддержка Angular / React / Node;
• запуск прямо в браузере.

4. Онлайн-сервисы для кодирования с подсветкой

Существуют сервисы, которые не только закодируют ваш код, но и подсветят его в зависимости от синтаксиса в разных стилях без установки библиотек.

<img src="https://apsolyamov.ru/images/3/codepen_embed.webp" alt="">

Нужно выбрать синтаксис (Type/Language) и стиль кода (Style), если сервис не определил его автоматически.

• https://pinetools.com/syntax-highlighter
• https://quickhighlighter.com/
• https://highlight.hohli.com/