Подсветка синтаксиса на WordPress плагином WP-Syntax

Здравствуйте! Сегодня речь пойдет о том, как можно вставить код в текст статьи или комментария. У WordPress есть специальный плагин для подсветки синтаксиса, называется он WP-Syntax.

Итак, допустим нам нужно в статье привести в качестве примера любой код. По умолчанию, без установки дополнительных плагинов, WordPress вырезает весь код из статьи и он не публикуется или исполняется вместо вывода на экран. А с помощью плагина мы легко и просто покажем его в статье.

Примеры использования тегов WP-Syntax для подсветки кода

Для вставки кода нам потребуется использовать специальные теги, в которые будем заключать код. Например:

<pre lang="language" line="1">
<?php
function foo() {
	echo "Hello World!\\n";
}
?>
</pre>

Где language — название языка по спецификации GeSHi, полный список приведен на странице плагина. Мне в большинстве случаев достаточно использовать php, js, css, html5, sql и т.д.

Номера строк

В плагине реализована поддержка отображения номеров строк. Параметр line указывает с какого числа проставлять нумерацию строк. Если указана единица, значит первая строка будет иметь номер 1. Если не хотите указывать строки вообще, то удалите этот параметр и код будет иметь следующий вид:

<pre lang="php">
<?php
function foo() {
	echo "Hello World!\\n";
}
?>
</pre>

При копировании кода со страницы строковые номера не выделяются и не копируются, что очень важно. Мне довелось устанавливать множество плагинов подсветки и большинство из них имею свои недостатки, в том числе связанные с номерами.

Выделение важных строк

Иногда приходится акцентировать внимание на какой либо строке, в этом случае необходимо применить параметр highlight. Приведу пример, в котором выделю третью строку. В режиме редактирования статьи пишем:

<pre lang="php" line="6" highlight="3">
<?php
function foo() {
	echo "Hello World!\\n";
}
?>
</pre>

Обратите внимание, параметру highlight присвоено значение 3, а нумерацию строк я задал начиная с шестой. Тем не менее подсветка будет именно у третьей строки сверху — это абсолютное значение.

Оптимизация плагина и дополнительная конфигурация

Плагин использует свои стили оформления, подключая отдельный css-файл в заголовке. Обращая внимание на скорость загрузки страницы, предпочтительно объединять css файлы в один общий. Для этого скопируйте все стили из файла wp-syntax.css, который находится в папке с установленным плагином в файл style.css темы WordPress.

Для того чтобы отключить автоматическое подключение wp-syntax.css в заголовке (исключаем повторную загрузку) добавьте в файл functions.php такую строчку:

remove_action( 'wp_head','wp_syntax_head' );

Этот фильтр подходит для старых версий плагина, если Вы давно его не обновляли. Для последних версий начиная с 1.0 следует найти в папке установленного плагина файл wp-syntax.php и закомментировать одну из строк таким образом:

// wp_enqueue_style( 'wp-syntax-css', $url, array(), WPS_VERSION );

У плагина WP-Syntax, впрочем как у многих других, есть один неприятный глюк. Заключается он в том, что при редактировании статьи в HTML-режиме теги pre и сам код работают как надо, но стоит переключиться в визуальный режим, как все содержимое тегов бесследно исчезает. Для решения этой проблемы нам потребуется в файле /wp-content/plugins/wp-syntax/wp-syntax.php найти строку:

if ($escaped == "true") $code = htmlspecialchars_decode($code);

и заменить ее на:

if ( (!$escaped) || ($escaped == "true") ) $code = htmlspecialchars_decode($code);

Такие нехитрые действия предотвратят удаление символов при переключении из HTML-режима в визуальный редактор и код не исчезнет.

Работа со стилями, изменение цвета подсветки

Плагин WP-Syntax основан на открытой библиотеке GeSHi. Для подсветки синтаксиса используется цвет шрифта, заданный по-умолчанию, однако в плагине реализован хук wp_syntax_init_geshi с помощью которого можно менять расцветку.

<?php
	add_action('wp_syntax_init_geshi', 'my_custom_geshi_styles');
 
	function my_custom_geshi_styles(&$geshi)
	{
		$geshi->set_brackets_style('color: #000;');
	}
?>

В этом примере мы меняем цвет угловых скобок < > на черный. Функция предназначена для опытных пользователей, требуется знакомство с документацией библиотеки.

В отличие от SyntaxHighlighter Evolved, который подгружает на страницу тонны скриптов и стилей, WP-Syntax очень легкий и функциональный. И самое главное — работает как часы!

Добавление кнопок WP-Syntax в HTML редактор

Использование shortcode для быстрой вставки тегов подсветки значительно упрощает работу со статьями. Для добавления кнопок в режим HTML-редактора вставьте в файл functions.php следующий код:

add_action('admin_footer', 'eg_quicktags');
function eg_quicktags() {
	?>
	<script>
	jQuery(document).ready(function(){
	if(typeof(QTags) !== 'undefined') {
		QTags.addButton( 'HTML', 'HTML', '<pre lang="html5" line="1">\n', '\n</pre>');
		QTags.addButton( 'CSS', 'CSS', '<pre lang="css" line="1">\n', '\n</pre>');
		QTags.addButton( 'PHP', 'PHP', '<pre lang="php" line="1">\n', '\n</pre>');
		QTags.addButton( 'JS', 'JS', '<pre lang="javascript" line="1">\n', '\n</pre>');
	}
	});
	</script>
	<?php
}

Теперь не нужно каждый раз в ручную прописывать длинные теги, просто вставьте код, который необходимо показать в статье, выделите его и нажмите на нужную кнопку для подсветки.

В примере я добавил кнопки для следующих языков: HTML, CSS, PHP, JS. Вы можете дополнить список по своему желанию. Появились вопросы — задавайте! До новых встреч!