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

 

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

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

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

Установка SyntaxHighlighter Evolved

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

Настройки SyntaxHighlighter Evolved

Настройка SyntaxHighlighter Evolved

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

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

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

Пример настроек 1

Пример настроек 2

  • 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. Всего хорошего. До новых руководств!!

 

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 

 

 
Top