Плагин SyntaxHighlighter Evolved — для чего? Установка и правильная настройка плагина!

— php
— html
— css
— javascript и многие другие.

Итак, начнем с истории создания этого плагина, а затем я покажу вам, как правильно установить этот плагин и настроить его.

Как появился плагин SyntaxHighlighter Evolved

Плагин SyntaxHighlighter Evolved был разработан программистом из города Портланда (штат Оригон) Алексом Миллсом. В сети интернет этот парень известен под именем Viper007Bond (или просто Viper). Он создал этот модуль на основе Java Script маркера с открытым кодом, авторство которого с 2009 года принадлежит Алексу Горбачеву.

Сейчас плагин SyntaxHighlighter Evolved очень популярен среди наших коллег блоггеров. Об этом говорит факт — более 300 тысяч скачиваний с официального сайта и отличные отзывы на форуме. Плагин англоязычный, но если есть желание, то можно скачать себе русификатор и тем самым облегчить себе настройки.

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

Установка SyntaxHighlighter Evolved

Для начала заходим в админ панель своего WordPress и нажимаем на «Плагины», а затем – «Добавить новый». В строку поиска плагина вводим название- SyntaxHighlighter Evolved и жмем на кнопку «Поиск плагинов».

На появившейся странице установки плагинов выбираем первый в списке и нажимаем на ссылку «Установить». Начнется закачка архива файла на ваш сервер.

После того, как файл закачается на сервер вашего сайта, активируйте плагин.

Теперь приступим к самому главному — настройкам плагина.

Основные настройки плагина SyntaxHighlighter Evolved

Наш плагин установлен, активирован и теперь нам нужно правильно его настроить, чтобы наш помощник начал выполнять все свои функции. Для этого нажимаем в сайдбаре админ панели своего wordoress на «Настройки» (напомню, что у меня версия WP 3.9.1, в старых версия вордпресс это раздел — «Параметры»).

В появившейся справа вкладке выбираем- «SyntaxHighlighter», что в переводе, кстати, означает «подсветка синтаксиса».

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

Но для полноты понимания всей картины внимательно прочитайте мой дословный перевод всех пунктов.

 — Highlighter Version. В выпадающем списке выбираем пункт 3.х, который позволит пользователям выделять мышью (либо двойным щелчком или перетаскиванием) участок кода и сохранять его в свой буфер обмена. То, что не сможет сделать версия 3.х, можно сделать, выбрав функцию-2.х.

 — Color Theme. Цветовая гамма. Здесь вы можете поэкспериментировать и подобрать себе тот, цвет, который вам нравится. Default в переводе означает –«по умолчанию» классическая подборка цветовой гаммы.

Лично я ничего не меняла, оставила по умолчанию. Но вы, например, можете настроить себе вот такой вид блока с кодом, если захотите (цветовая тема Midnight, в переводе с английского — «полночь»):

 — Load All Brushes. Этот раздел настроек отвечает за вывод языковых файлов, в которых используется тег <pre>. Для справки скажу, что Тег <pre> выводит блок кода, в который помещают предварительно отформатированный текст на усмотрение автора. В общем, тут можно не ставить галочку, оставить настройку, так как есть.

— Default (По умолчанию). Подраздел Miscellaneous (разное). Здесь все можно оставить, ничего не меняя. Более подробно объясню каждое значение ниже.

1) Display line numbers. Оставляем галочку, потому что эта функция настроек отвечает за нумерацию в блоке с кодом. Если галочку не поставите, то строчки пронумерованы не будут.

2) Display the toolbar. Если здесь поставить галочку, то при наведении на блок с кодом курсора мыши будет появляться панель инструментов. Используя эту панель можно копировать код в буфер обмена или распечатывать.

3) Automatically make URLs clickable. Если включена эта опция, то все ссылки в коде будут активными и по ним можно будет перейти.

4) Collapse code boxes. Эта функция, если ее включить, сворачивает весь код в одну строчку. Эта опция удобна при использовании кодов больших размеров.

5) Use the light display mode, best for single lines of code. Функция настройки переводится, как легкий режим для однострочного кода. Тут все понятно. Предусмотрено включение этой функции при использовании кода в одну строку. При этом отключается нумерация кода, и не будет показываться панель для его копирования.

6) Use smart tabs allowing tabs being used for alignment. С помощью этой опции выводится смарт-вкладка, выравнивающая код.

7) Wrap long lines (v2.x only, disabling this will make a scrollbar show instead). Длинные строчки кода равномерно распределяются по блоку и выносятся на следующую строку.

В поле Additional CSS Class (es) вы можете вписывать при необходимости свой код css для выделения его в общем блоке кода. Starting Line Number .Означает, с какой цифры вы хотите, чтобы начиналась нумерация в коде. Line Number Padding.

Отвечает за вид нумерации. К примеру, если вы хотите, чтобы ваши строчки кода были пронумерованы в таком вот виде: о1, о2, о3 и так далее, то выбирайте в выпадающем списке цифру 1. Если вы хотите, чтобы строки кода нумеровались в более привычном виде: 1,2,3, и т.д, тогда оставьте опцию «OFF».

Tab Size. Стандартный размер 4 лучше оставить по умолчанию.

Title. Заголовок. Название вашего блока с кодом. Можете вписать в это поле свое название, и оно появится перед вашим кодом. После того, как вы сделаете все настройки этого плагина, не забудьте нажать кнопку «Сохранить изменения».

Preview. Означает Предварительный просмотр. Ниже вы увидите свой код, в том виде, какой вы настроили. Вот так он примерно выглядит.

Далее на странице настроек плагина SyntaxHighlighter Evolved вы можете почитать информацию о том, какие бывают параметры кодов для вывода их на сайте в тексте статьи, а также примеры шорт кодов.

Используйте обычный транслятор-переводчик для Google, тот, что переводит всю страницу целиком. Это очень удобно в работе с англоязычными текстами. Как видите, установка и настройка этого нужного и полезного плагина SyntaxHighlighter Evolved совсем несложная.

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

Автор статьи: Елена Контиевская