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

Ромчик
0

SyntaxHighlighter EvolvedДоброго времени суток. Мы с Вами продолжаем наращивать функционал нашего ресурса.  И сегодня поговорим о размещении кода на нашем блоге. Многие блогеры, размещая код (html, php, javascript и др.) не уделяют ему должного внимания. А ведь выделенный код — более понятен, удобочитаем, да и просто хорошо смотрится в посте. Для подсветки кода мы будем использовать плагин для WordPress — SyntaxHighlighter Evolved. Этот плагин позволяет подсветить код, пронумеровать строки. SyntaxHighlighter Evolved понимает следующие коды:

Плагин SyntaxHighlighter Evolved удобен в использовании. Давайте остановимся на его настройках и применении более подробно.

Скачать данный плагин вы можете на официальном сайте.
Установка происходит стандартно и не вызывает никаких вопросов.
Перейдем к настройке SyntaxHighlighter Evolved плагина. Для этого переходим “Параметры”->”SyntaxHighlighter”

Настройка SyntaxHighlighter EvolvedИ переходим в окно настроек данного плагина.

Настройка SyntaxHighlighter EvolvedВ поле “Highlighter Version” мы устанавливаем версию нашего плагина.
В поле “Color Theme” мы можем выбрать тему для отображения кода.
В поле “Load All Brushes”, если поставить галочку, то будут загружаться все языковые файлы для использования тега <pre>, а не короткие теги.
В следующей области настроек:

Настройка SyntaxHighlighter EvolvedВ поле “Display line numbers” включаем или выключаем показ номера строк.
В поле “Display the toolbar” включаем или отключаем панель настроек.
В поле “Automatically make URLs clickable” делаем ссылки в коде кликабельными.
В поле “Collapse code boxes” разрешаем или запрещаем сворачивать блоки кода.
В поле “Use the light display mode, best for single lines of code” использовать или не использовать легкий режим отображения.
В поле “Use smart tabs allowing tabs being used for alignment” использовать вкладки для выравнивания.
В поле “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” устанавливаем отступ для номера строки.
В поле “Tab Size” устанавливаем размер табуляции.
В поле “Title” записываем подпись перед кодом.
Для того, чтобы настройки вступили в силу необходимо нажать “Сохранить изменения”.
В следующей области окна настроек плагина SyntaxHighlhighter Evolved — Preview мы можем посмотреть как выглядит наш код. Preview изменяется при нажатии на “Сохранить изменения”.

Настройка SyntaxHighlighter EvolvedНа этом настройки плагина SyntaxHighlighter Evolved закончены.
Для того, что бы воспользоваться данным плагином. Необходимо при добавлении записи перейти в редактирование html. Это сделать обязательно, потому что при добавлении кода из визуального редактора наблюдаются глюки.
После добавить код в теге, отвечающем за отображение кода. Так, например, при добавлении php кода необходимо сделать следующую вставку:

Пример вставки php-кодаДля добавления html кода используйте тег:

Пример вставки html-кодаДля добавления css кода используйте тег:

Пример ставки css-кодаДля добавления javascript кода используйте тег:

Пример вставки javascript-кодаО других тегах Вы можете прочитать на официальном сайте разработчика.

На этом знакомство с плагином для WordPress SyntaxHighlighter Evolved, который подсвечивает код в записи закончен. Надеюсь статья была Вам полезна.
Если у Вас возникли вопросы спрашивайте в комментариях я постараюсь Вам помочь. В следующей статье мы с Вами рассмотрим очень важный плагин WordPress Database Backup, так что не пропустите выхода новых статей, подписавшись на RSS-рассылку данного блога. А пока все, до скорых встреч.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2017 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика