MaxTarget

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

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

wp-syntax

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

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

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

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

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

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

Вот так будет выглядеть код на странице:

1
2
3
4
5
<?php
function foo() {
	echo "Hello World!\\n";
}
?>

Номера строк

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

1
2
3
4
5
6
7
<pre lang="php">
<?php
function foo() {
	echo "Hello World!\\n";
}
?>
</pre>

На странице мы увидим:

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

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

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

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

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

А теперь как это будет выглядеть на экране:

6
7
8
9
10
<?php
function foo() {
	echo "Hello World!\\n";}
?>

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

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

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

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

1
remove_action( 'wp_head','wp_syntax_head' );

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
<?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 следующий код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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
}

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

Кнопки WP-Syntax в редакторе

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

  1. Андрей

    Огромное спасибо! Давно хотел узнать, как это делается, а негде было. Обязательно буду читать и другие посты.

    Ответить

  2. Добрый Человек

    Я пару дней назад, буквально, головой бился, не знал как это сделать. А тут всё подробно. Весьма…

    Ответить

  3. Webliberty

    Очень рад, что статья оказалась полезной 🙂

    Ответить

  4. Анжела

    Забрела на Ваш блог, потому что читала блоги с эстафетой 10 книг (я в жюри), но обнаружила еще много полезностей, буду заглядывать чаще, потому что некоторые вопросы по WP возникают часто. Вот сейчас проблема с последней версией WP — его выбрасывает, когда обновляешь запись, тег пропадает, прикол. Как закрывать ссылку? 😉

    Поздравляю с первой 10 в Яндексе. Я тоже очень радовалась. Но первая десятка у меня слетела через месяц, а потом спустя только два месяца опять появилась. Удачи Вашему блогу!

    Ответить

  5. Webliberty

    Анжела, рад познакомиться 🙂 Не совсем понял какую ссылку нужно закрывать…

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

    Ответить

  6. Алексей

    Я в добавок к этому плагину использую еще WP-Syntax Button. Упрощает работу в разы.

    Ответить

  7. seok

    Помогите решить проблему. Установил данный плагин и все хорошо работает. Но вот проблема в том, что теперь когда я прописываю теги просто в тексте они не отображаются. Например пишу: «Закрываем тег». И получается, что в тексте я теперь не могу так писать, потому что плагин автоматически скрывает тег если он не обрамлен соответствующим кодом. Что посоветуете делать в такой ситуации, когда в тексте используются названия тегов разметки. Кстати у Вас я вижу каким то образом прописаны. Как это сделать?

    О кстати у Вас такая же проблема. И что теперь делать?

    Ответить

  8. Webliberty

    Не знаю, правильно ли понял Ваш вопрос, но думаю он касается отображения символов < и > в тексте. Верно? Теги в любом случае будут скрыты, если не используется подсветка, не важно установлен плагин или нет.

    Для вставки таких символов я использую их сущности: &lt; и &gt; А для удобства добавил эти символы в HTML редактор точно также как кнопки WP-Syntax:

    1
    2
    
    QTags.addButton( '<', '<', '&lt;', '');
    QTags.addButton( '>', '>', '&gt;', '');

    Ответить

  9. Alex

    Добрый день!
    1. Код

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

    не помогает. Как только переходишь в визуальный режим все ломается как и было.
    2. Как вставляю код для кнопок в файл functions.php, обрамляю текст тегами подсветки и жмакаю обновить запись, затем перехожу ее посмотреть, вижу лишь белую страницу. Удаляю код из functions.php, сайт работает, но в посте только куски кода.
    3. Что я делаю не так и как исправить? Спасибо!

    Ответить

  10. Webliberty

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

    Кнопки всего лишь упрощают добавление шорткода. Проверьте правильно ли вставили код в functions.php — он не должен находится внутри другого цикла. Попробуйте без использования кнопок (без правки файла functions.php) вручную разметить код и проверить страницу.

    Ответить

Ваш комментарий:

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea: