Из этой статьи вы узнаете о 2 самых популярных плагинах WordPress, с помощью которых можно вставить и подсветить синтаксис кода различных языков программирования в статьях и записях своего блога.
Плагины выделения кода или синтаксиса обычно используются в статьях и на страницах WordPress для отображения фрагментов кода. Блогеры используют такие плагины, чтобы сделать свой код красивым и красочным, чтобы он выделялся на фоне остального текста статьи.
Кому могут понадобиться данные плагины?
Данные плагины действительно понадобится тем, кто занимается веб разработкой и любит делиться кодами различных языков программирования у себя в блоге. Перед установкой плагинов возьмите на заметку, что некоторые из них могут очень сильно замедлить работу сайта и нагрузить сервер, на котором он находится. Поэтому сперва решите, точно ли нужна вам эта функциональность.
1. SyntaxHighlighter Evolved
SyntaxHighlighter Evolved является самым популярным плагином в своей категории. Его скачали и установили более 40 000 раз. После установки, плагин будет тесно интегрирован в ваш блог. Подсветка кода включается с помощью использования шорткода.
Какие языки программирования поддерживает плагин?
Плагин SyntaxHighlighter Evolved поддерживает следующие языки:
-
-
- html
- css
- php
- sql
- javascript
- python
- ruby
- xml
-
Дополнительно поддерживаемые языки:
-
-
- actionscript3
- bash
- clojure
- coldfusion
- cpp
- csharp
- delphi
- diff
- erlang
- fsharp
- go
- groovy
- java
- javafx
- latex
- matlab
- objc
- perl
- powershell
- r
- scala
- text
- vb
-
После установки этого плагина, нам потребуются некоторые манипуляции для его отладки. В первую очередь мы должны определиться с внешним видом отображаемого кода. Давайте посмотрим как это делается.
Шаг 1. Настройка плагина
-
- В панели управления WordPress выбираем Настройки -> SyntaxHighlighter
- В настройках у нас есть возможность выбрать версию плагина. Доступна Версия 3.x и Версия 2.x. Основное их отличие заключается в том, что Версия 3.x не допускает переноса строк в отличие от Версия 2.x и позволяет посетителям легко выделять часть кода с помощью мыши и копировать его в буфер обмена. Включая Версию 2.x, рядом с кодом появляется дополнительная панель инструментов, которая, по моему мнению мешает и портит эстетический вид.
- Вторая важная настройка — это цветовая гамма. Всего доступно 6 цветовых гамм. Выбирайте тот вариант, который лучше всего подходит к дизайну вашего сайта.
Остальные пункты настройте по своему вкусу и усмотрению.
Шаг 2. Вставка кода
Помните один важный момент, код лучше всего вставлять в текстовом режиме. Визуальный редактор может искажать вставляемые фрагменты.
-
- Чтобы вставить код, необходимо использовать соответствующий шорткод, например [ php]ваш код[/php] или [ css]ваш код[/css] (не забудьте удалить пробелы в квадратных скобках).
- Чтобы включить подсветку того или иного языка программирования, используйте любое из вышеуказанных слов из списка поддерживаемых языков, внутри квадратных скобок.
Как работает этот плагин, вы можете посмотреть на примере отображения css кода:
.pull-quote {
width: 200px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ;
}
2. Enlighter – Customizable Syntax Highlighter
-
-
- Скачать: wordpress.org/plugins/enlighter/
-
Enlighter — это бесплатный и простой в использовании инструмент для подсветки синтаксиса в WordPress. Плагин поддерживает множество популярных языков программирования и обладает очень большим количеством настроек, которые захватывают практически все аспекты отображения кода.
Возможности плагина:
-
-
- Полная интеграция с редактором Гутенберга
- Полная интеграция с классическим редактором (TinyMCE)
- Поддержка всех распространенных языков
- Мощный универсальный механизм выделения для неизвестных языков
- Настройщик тем
- Встроенная подсветка синтаксиса
-
Шаг 1. Настройка плагина
Плагин настраивается из главного меню. После установки у вас должен появиться новый пункт меню Enlighter. Рассматривать все настройки плагина в рамках этой статьи я не буду, т.к. их огромное количество и на них можно потратить большое количество времени. В принципе, плагин корректно работает сразу после установки и не требует никаких ваших вмешательств. Все, что нужно сделать, так это выбрать тему для оформления кода, которая бы подходила под дизайн вашего сайта.
Шаг 2. Вставка кода
Данный плагин позволяет вставлять код прямо в визуальном редакторе без использования шорткодов.
- Чтобы вставить код, необходимо нажать на кнопку со скобками и в открывшемся окне напечатать свой код. Вставка кода организована достаточно удобно и позволяет сразу выбрать язык кода.
Как работает этот плагин, вы можете посмотреть на примере отображения php кода:
< ?php
function add_some_extra(&$string)
{
$string .= 'and something extra.';
}
$str = 'This is a string, ';
add_some_extra($str);
echo $str; // Выведет 'This is a string, and something extra.'
? >
Загрузка...