Подсветка кода в статьях WordPress - плагин SyntaxHighlighter.


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

И решение нашлось в плагине SyntaxHighlighter Evolved. С его помощью не просто стали отображаться все знаки препинания как надо, но и сам код в статье стал выделяться, что улучшило восприятие материала. Вот пример:

Любой Ваш код

Установка и настройка плагина SyntaxHighlighter Evolved для WordPress.

Как всегда, для начала, заходим в админку wordpress в "Плагины" и далее "Добавить новый". Используя встроенный поиск вводите название нужного плагина и видите его в результатах поиска. Жмете "Установить". Возвращаетесь в меню "Плагины", находите его в списке установленных и активируете. После активации плагин можно сразу использовать, даже без его дополнительной настройки, но мы все же ее сделаем.

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

В меню "Параметры" находите название нужного плагина "SyntaxHighlighter" и жмете на него.

Настройка плагина SyntaxHighlighter - красивая подсветка кода в статье

Рассмотрим некоторые настройки:

Самое первое - выбор версии 2.x или 3.x. Влияет на некоторые другие функции. Например, такую, как перенос длинной строки на следующую строку, доступную только в версии 2.x.

"Color Theme" - цветовая схема. Можно выбрать один из нескольких вариантов.

"Display line numbers" - Показывать номера строк. Если поставить галочку, то слева перед каждой строкой будет написан ее номер.

"Display the toolbar" - Показывать панель инструментов. Если поставить галочку, то при наведении мышки на окно с кодом будет высвечиваться панелька с кнопками: скопировать код в буфер обмена, распечатать.

"Automatically make URLs clickable" - Автоматически делает урлы кликабельными. То есть можно будет перейти по ссылкам в коде также, как и по обычным ссылкам.

"Collapse code boxes" - Сворачивать окно с кодом. Очень удобно, если Вы планируете вставлять в статьи большие куски кода, так как окно с кодом будет свернутым и будет разворачиваться при щелчке по специальной ссылке.

"Use the light display mode, best for single lines of code" - Легкий режим для выведения коротких однострочных кодов.

"Wrap long lines" - Перенос длинной строки на следующую вместо горизонтальной прокрутки.

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

Как пользоваться плагином.

Чтобы вывести какой-либо код используйте теги с квадратными скобками. Например:

[рhp]Ваш код[/рhp]

На блоге Alumn.ru Вы можете наблюдать действие, именно, плагина SyntaxHighlighter Evolved. (уже не наблюдаете - его нет)

Другие плагины wordpress: Плагин RusToLat и плагин PageNavi.

  • http://times.fireg.ru/ Дмитрий

    Вот исходный код

    А как сделать что бы текст не становился таким:
    <div>
    <div><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')) ?></div>
    <div><?php previous_posts_link(__('Newer Entries &raquo;', 'kubrick')) ?></div>
    </div>

    Все меняется и не читабельно становится(((

  • http://alumn.ru/ Артем

    Не вижу в комментарии исходного текста, но попробую догадаться исходя из своего опыта. Проблема, возможно, в появлении тегов div. Если так, то они появляются из-за форматирования текста. Если тег div появляется и в чистом коде, то решением может послужить простая очистка от тегов и повторное сохранение. Должно помочь.

  • http://times.fireg.ru/ Дмитрий

    Ну дивы только те, которые изначально есть в коде и которые, как бы нужны, если их удалить то архитектура пропадет. Хм наверно у вас комментарии преобразовываются, щас по другому напишу, пробелы поставлю для ясности:<div>
    &lt ;div& gt;& lt;?php next_posts_link(__('& amp;laquo; Older Entries', 'kubrick')) ?& gt;& lt;/div&g t;

    Я в некоторых местах поставил в коде пробелы, вот что у меня получается при публикации, а в предыдущем моем сообщении так, как должно быть, но никак не выходит(((

  • http://alumn.ru/ Артем

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

  • http://soveton.ru silla

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

    • http://alumn.ru/ Артем

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

  • http://get-blog.ru/ Владимир

    Столкнулся с плагином wp syntax для вставки кода, но впечатления остались не очень приятные. Попробую ваш вариант,

Путешествуем и зарабатываем!
Смотри! Присоединяйся!