Подсветка кода в 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. Всего хорошего. До новых руководств!!
Залишити коментар