На всех платформах, посвященных программированию на различных языках, можно встретить фрагменты готового кода. Это может быть как блоги, так и форумы, а также сайты с вопросами и ответами. Удобно, когда код выделяется цветом, так как это значительно облегчает его восприятие. Однако WordPress по умолчанию не предоставляет возможности для подсветки синтаксиса, и код отображается довольно монотонно.
Чтобы решить эту проблему, можно воспользоваться специальными плагинами, которые добавляют функционал подсветки синтаксиса в редактор WordPress. Среди популярных вариантов выделяются:
- Prism.js — легковесный и высокопроизводительный инструмент, который поддерживает большое количество языков программирования и может быть настроен под ваши нужды.
- SyntaxHighlighter — классический плагин, который предоставляет множество опций для кастомизации, включая различные темы и стили подсветки.
- EnlighterJS — еще один мощный инструмент, поддерживающий различные языки и стили, а также позволяет интеграцию с CSS для создания уникального вида вашего кода.
Для установки плагина достаточно зайти в раздел «Плагины» в админке WordPress, выполнить поиск по имени плагина, затем установить и активировать его. После этого нужно будет следовать инструкциям по настройке, которые, как правило, включают добавление специального кода или короткого кода (shortcode) в ваши записи или страницы.
Код в защищенном формате в HTML также можно вставлять вручную, оборачивая его в специальные теги, но использование плагинов значительно упрощает этот процесс. Адаптация вашего контента с помощью подсветки синтаксиса сделает его более привлекательным и легким для чтения, особенно для вашей технической аудитории.
Плагин Crayon Syntax Highlighter
Бесплатный плагин
На панели инструментов можно заметить новую кнопку, добавленную плагином, которая предназначена для вставки кода. Устанавливаем курсор в то место записи, куда должен быть вставлен код, и нажимаем на эту кнопку. После этого откроется окно для ввода кода.
В интерфейсе представлено множество различных настроек. Для вставки кода нам понадобятся лишь некоторые из них. В поле Language выбираем язык программирования, соответствующий вставляемому коду, например, PHP. Затем, в текстовом поле Code, вводим сам код и нажимаем кнопку Add.
В результате в редакторе наша запись будет выглядеть следующим образом:
Чтобы сохранить все изменения, необходимо нажать кнопку Обновить, после чего можно перейти на сайт.
Если навести курсор на участок с кодом, появится панель с кнопками, которая позволяет, как уже упоминалось ранее, скопировать код в буфер обмена или открыть его в новом окне.
Плагин также поддерживает различные стили оформления кода, что позволяет настроить его отображение в соответствии с дизайном вашего сайта. Вы можете выбрать цветовую схему, изменить шрифт и даже настроить размеры полей для лучшего восприятия информации.
Кроме того, Crayon Syntax Highlighter совместим с большинством тем WordPress и не требует дополнительных настроек для работы. Если вы хотите улучшить читаемость кода и его выделение, этот плагин станет отличным выбором.
Настройка стиля подсветки под свои нужды
Чтобы адаптировать оформление для маркировки синтаксиса, необходимо изменить CSS-стили, используемые плагином. Чаще всего такие плагины, как Prism.js или Highlight.js, предоставляют возможность интегрировать свои стили. Для начала скачайте и сохраните файл стилей на свой сервер. Затем подключите его в заголовке вашей темы через функцию wp_enqueue_style:
function custom_styles() { wp_enqueue_style('custom-highlight', get_template_directory_uri() . '/css/custom-highlight.css'); } add_action('wp_enqueue_scripts', 'custom_styles');
После этого вы сможете менять цвета, шрифты и другие параметры. Например, если хотите изменить фон для выделенных элементов, добавьте в ваш CSS файл:
.highlight { background-color: #f0f0f0; }
Важно помнить, что правильный выбор сочетания цветов улучшает восприятие кода читателями.
Дополнительно можно расширить функциональность с помощью параметров плагинов. Многие из них поддерживают настройку тем оформления и позволяют выбирать из существующих вариантов или создавать новые. Например, это может быть реализовано через пользовательские настройки в административной панели. Изучите документацию вашего плагина для нахождения необходимых опций. Настройка стильной маркировки сделает контент на сайте более удобным и приятным для восприятия.