Подсветка кода. Плагин SyntaxHighlighter Evolved

Здравствуйте, уважаемые читатели моего блога!

Сегодняшний пост посвящен плагину SyntaxHighlighter Evolved, предназначенному для подсветки кода в статьях и комментариях WordPress блога. Проще говоря, плагин SyntaxHighlighter предназначен для того, чтобы вставить любой код (например, php или html) в текст статьи или в комментарии.

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

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

Вот пример использования этого плагина:

get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10"); foreach ($result as $post) { setup_postdata($post); $postid = $post->ID; $title = $post->post_title; $commentcount = $post->comment_count; if ($commentcount != 0) { ?> 

Таким образом можно вставлять любой код на страницы блога.

Установка плагина SyntaxHighlighter Evolved

Скачать SyntaxHighlighter Evolved можно перейдя по этой ссылке.

Теперь, как обычно, плагин необходимо поместить в папку «plugins» блога (wp-content/plugins/). Для русификации необходимо загрузить файлы из скачанного архива в папку с языковыми файлами плагина (wp-content/plugins/syntaxhighlighter/localization).

Затем активировать плагин через административную панель WordPress во вкладке «Плагины».

Настройки SyntaxHighlighter Evolved

В принципе, без настроек плагин должен нормально работать. Но если Вам необходимо внести какие-либо изменения в настройки плагина, то перейдите в пункт «Параметры-Подсветка синтаксиса» в административной панели:

Настройки плагина SyntaxHighlighter (на примере руссифицированной версии):

• выбор версии Syntax. На своем блоге я использую версию 3х.
• выбор цветовой схемы. Здесь можно выбрать семь различных цветовых решений.

Разное:

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

Внимание! Если к ссылкам не применен атрибут rel="nofollow", то ссылки будут индексироваться поисковыми системами!;

• сворачивать окно с кодом. При активации данного параметра при открытии страницы изначально код будет отображаться в свернутом виде;
• использовать легкий режим. При использовании этой опции не будут отображаться номера строк и панель инструментов (удобно для кода, состоящего из одной строки);
• Wrap long lines (disabling this will make a scrollbar show instead). Если галочка стоит, то строки кода будут автоматически переноситься, а если нет, то появится полоса прокрутки.

Это основные настройки плагина, я думаю, что дальше Вы разберетесь сами, ничего сложного там нет. Хочу отметить, что некоторые опции доступны только для версии 3x.

Для того чтобы подсветить любой код, необходимо его заключить в специальные тэги с квадратными скобками, например,

[ php] Ваш код [ /php]

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

Стили оформления находятся в папке styles плагина (wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles). Ничего сложного там нет.

Например, я изменил размер шрифта текста в подсвеченном коде. Изначально у меня был такой вид:

Теперь шрифт стал меньше:

Для этого я добавил строку: «font-size: 11px !important» в файл shThemeEclipse.css:

Здесь же можно изменять другие визуальные параметры плагина SyntaxHighlighter.

На этом у меня все. Как Вам статья?

Чтобы не пропустить выход новых постов, советую Вам подписаться на обновления моего блога.

С уважением, Александр Бобрин

Поделись с друзьями: