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

Если вы ведете блог на какую-то техническую тему связанную с программированием, созданием сайтов или просто пишите how-to по настройке компьютера, часто возникает необходимость выкладывать на сайт фрагменты кода, различные команды или какие-нибудь логи. И естественно, желательно чтобы это было удобно и понятно оформлено. В WordPress для меня самым удобным способом вставки кода в свои статьи является использования плагина SyntaxHighlighter Evolved.

Установить плагин можно через встроенный менеджер плагинов в WordPress. В поиске вбиваете название плагина и из результатов поиска устанавливаете его.

После установки активируете плагин и переходим в его настройки.

Настройка SyntaxHighlighter Evolved

Первый блок настроек

• Highlighter Version – версия плагина. По умолчанию стоит третья, но можно выбрать вторую. Самым большим отличием является то, что в старой версии длинная строка по умолчанию будет переносится, а в новой, всегда будет одна строка с горизонтальной прокруткой.

• Color Theme – внешний вид блока кода. Выбираете на свой вкус и под дизайн сайта.
• Load All Brushes – отвечает за загрузку языковых файлов. Как написано в самой в подсказке, если вы не уверенны нужно это вам или нет, лучше оставить отключенным.

Второй блок настроек

• Display line numbers – отображать или нет номера строк в блоке кода.
• Display the toolbar – отображать тулбар. Если пункт отмечен, при наведении на блок с кодом, в нем появляется вплывающее окно с дополнительными действиями: просмотреть код, скопировать, распечатать и инфо о плагине.

• Automatically make URLs clickable – если включить, то все ссылки в коде станут активными.
• Collapse code boxes – сворачивать блоки кода. Удобно, если у вас есть большие куски кода. При активированном пункте, весь блок будет свернут в одну строку.
• Use the light display mode, best for single lines of code – использовать облегченный режим отображения. Если его использовать, отключается нумерация строк и тулбар с дополнительными функциями.
• Use smart tabs allowing tabs being used for alignment – при включенной опции выводится смарт-вкладка, которая выравнивает код
• Wrap long lines – только для второй версии плагина. Здесь включается и отключается перенос длинной строки.

Третий блок настроек

• Additional CSS Class(es) – возможность добавить свой CSS в оформление блока кода
• Starting Line Number – с какой цифры начинать нумерацию строк.
• Line Number Padding – как нумеровать строки: 1, 01, 001 и т.д.
• Tab Size – размер табуляции.
• Title – заголовок блока.

После этого сохраняем изменения. Если что-то не так, можно сбросить настройки на дефолтные нажав “Reset to Default”

Как вставить код в статью WordPress

Чтобы вставленный код обрабатывался плагином SyntaxHighlighter Evolved, необходимо создать конструкцию

[шорткод]код[/шорткод]

Где вместо шорткода вы подставляете свой язык, например: php, css, bash, html и т.д. Если код отображается некорректно, можно перейти в html редактор и вставить нужный блок непосредственно в код статьи.

Ну вот, если вам нужна была подсветка кода в WordPress, вы знаете как это сделать с помощью SyntaxHighlighter Evolved. Всего хорошего. До новых руководств!!