Дорогие вебмастера, работающие с сайтами и блогами на CMS Joomla!

Недавно я столкнулся с необходимостью подсвечивать примеры исходного кода в статьях. Joomla по умолчанию как-то может это делать через встроенный в пакет Joomla! плагин подсветки синтаксиса кода Code Hightlighter (GeSHi). Но он это делает не очень красиво и настроек у него не так много.

Я нашел более удобный и универсальный плагин CodeCitation для этой же задачи и применил его в одной из предыдущих моих статей. Можете посмотреть пример применения его здесь и ниже в данной статье.

Рассмотрим установку и применение этого плагина.

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

Для начала нужно скачать плагин CodeCitation.

Устанавливаем его через Расширения -> Установить/Удалить. Выбираем файл CodeCitation.1.3.1.zip, нажимаем Загрузить файл & Установить.

Теперь давайте включим и настроим плагин CodeCitation. Заходим в Расширения -> Менеджер плагинов. Ищем Content - CodeCitation, жмем по нему. Открывается страница настроек плагина. Здесь слева кнопочкой включаем плагин.

В блоке Параметры можно установить дефолтные настройки:

Color theme - позволяет выбрать одну из пяти тем отображения блока исходного кода или тему по умолчанию.

Alternative tag to trigger the plugin usage - Альтернативный тег для запуска плагина CodeCitation. 

Default language to cite - плагин поддерживает подсветку следующих языков программирования:
as3, actionscript3, bash, shell, c-sharp, csharp, cpp, c, css, delphi, pas, pascal, diff, patch, groovy, js, jscript, javascript, java, jfx, javafx ,perl, pl, php, plain, ps, powershell, text, py, python, rails, ror, ruby, scala, sql, vb, vbnet, xml, xhtml, xslt, html, xhtml.
В этой настройке можно указать, какой язык подсвечивать по умолчанию. Если нужно будет подсветить какой-нибудь другой язык, то необходимо тегу {сodecitation}{/codecitation} указать для атрибута class, например, свойство brush: php; для подсветки php-кода.

Auto-links - определяет, нужно ли делать кликабельными гиперссылки, встречающиеся в коде.

Collapse - скрытый код. Чем-то это свойство похоже на тег спойлера. Т.е. в статье будет выводиться не сразу подсвеченный код, а ссылка expand source, при нажатии на которую раскрывается исходный код. Удобно скрывать исходный код, когда на странице очень много информации и пользователь раскрывает код только тогда, когда ему это нужно.

Gutter - Включает/выключает вертикальную линейку. В выключенном режиме скрывает нумерацию строк.

Smart tabs - Включает/выключает smart-табуляцию. Не совсем понял за что отвечает.

Tab size - задает ширину отступов.

Toolbar - Включает/выключает панель помощи. Это четыре кнопочки, которые появляются сверху справа при наведении на блок исходного кода. Эти кнопки позволяют посмотреть исходный код в текстовом формате в новом окне, поместить в буфер (скопировать) исходный код, приведенный в блоке или распечатать его.

Wrap lines - Включить/выключить полосу прокрутки (если длинный код).

Выставляем желаемые настройки и жмем Сохранить.

Синтаксис плагина и дополнительные опции

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

{codecitation class="brush: php; first-line: 1;"}Текст исходного кода{/codecitation}

Т.е. исходный код указываем между тегами {сodecitation}{/codecitation}. Также имеем возможность тегу {сodecitation}{/codecitation} указать дополнительные свойства через атрибут class. 

Здесь важное значение имеет свойство brush, которое задает тип языка проограммирования. По умолчанию это Текст, но можно задать в настройках и другой из списка. 

Плагин может определять нумерацию первой строки, выделять нужные строки заливкой и включать горизонтальную линейку. Все это настраивается через свойства атрибута class тега {сodecitation}{/codecitation}.

Таблица свойств атрибута class тега {сodecitation}{/codecitation}