Главная Часть 1. Создание блога Глава 4. Плагины WordPress Урок 50. Лучший плагин для подсветки синтаксиса

Урок 50. Лучший плагин для подсветки синтаксиса

Syntax Highlighter

Всем привет, это снова я 🙂

Помните, в уроке про установку поиска от Яндекс, я обещал разобраться с конфликтом между SyntaxHighlighter Evolved и собственно самим поиском. Напомню, когда данный плагин был активирован, форма поиска не отображалась! Она просто исчезла. Это, конечно, серьезная проблема, т.к. плагин отличный для подсветки. Им легко было подсвечивать код, достаточно было его заключить в [php] текст [/php]. И все! Сегодня с самого утра я отправился на поиски его аналога. потратил я более 5-ти часов. Нашел свыше 10 различных его аналогов. Но все были просто ужасны в плане удобства. Чтобы подсветить там текст, надо было писать длинную строку кода, что вообще неудобно. В конечном итоге сработало одно из моих любимых высказываний - «Кто ищет - тот всегда найдет!». И я нашел его аналог, да еще и гораздо удобнее его самого...

В этом аналоге не надо даже и [php] писать, достаточно нажать всего на 1 кнопку, которая появится на панели инструментов WordPress и во всплывающее окно вставить нужный код и нажать на кнопку «Insert». И все! Код будет подсвечен. Давайте перейдем к знакомству и установке плагина «WP SyntaxHighlighter». Скачиваем его тут. Активируем. Пока в настройки можно не идти, это чуть позже. Перейдите теперь в редактирование записи, либо нажмите на «Добавить новую».

Посмотрите, появились 2 новые кнопки:

Нас интересует вторая, с надписью «CODE». Нажмите на нее, появится окно. Вставьте любой код, какой хотите, можете html, можете css, я лично вставлю свой любимый php-код. Например, возьму его строчку из урока про .htaccess, и подсвечу. Смотрите:

3 действия для подсветки кода

  1. Выбираете из списка нужный язык
  2. Вставляете сам код
  3. Нажимаете на кнопку «Insert» (Вставить)

Вот что вышло:

подсветка кода 1

Видите, появилась вокруг кода рамочка? А вот как она будет выглядеть, когда Вы опубликуете статью:

подсветка кода 2

Еще легче! Ничего самому писать не надо! Согласитесь, очень удобный плагин. Единственная проблема в том, что теперь мне придется потратить еще минут 20-30, чтобы исправить все статьи, где я использовал предыдущий плагин.

Настройки плагина

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

  1. Цветовая схема. Меня устраивает та, что по умолчанию. Но Вы можете изменить ее на любую другую, для этого в выпадающем списке выберите нужную: настройка темы плагина
  2. А вот это я всем рекомендую, во имя экономии времени. Помните, перед тем как подсветить код, надо из списка выбрать язык его? Список, как Вы помните, очень длинный. А ведь что нам нужно для веб программирования? Лишь html, css, php ну и JavaScript. И оставим, пожалуй, SQL. Как это сделать? Переходите в настройки плагина, затем в самом конце выбираете раздел «Default Languages Settings». И напротив ненужных языков ставим отметку «No».

Настройки языков программирования

И когда все сделаете, нажмите на кнопку «Save Changes».

Наслаждайтесь результатом! А я пойду изменю другие статьи 🙂

Удачи!

Полезные статьи Вам на почту!

Нас более 700 человек!

Комментарии

Dreron
0

В вордпрессе совсем недавно, посветил свой блог программированию, и тоже убил много времени на поиски нормального плагина) а как оказалось, что его уже нашли) спасибо)

12.05.2013
Sly
0

Рад помочь 🙂

12.05.2013
Валерия
0

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

17.11.2015

Оставить комментарий

Поделиться