Как сделать подсветку html или php кода в статьях Joomla

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

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

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

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

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

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

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

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

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

CodeCitation1

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}

Параметр Значение по умолчанию Описание
auto-links true Определяет, нужно ли подсвечивать ссылки в коде
collapse false Скрытый код
first-line 1 Номер первой строки
gutter true Включает/выключает вертикальную линейку
highlight null Позволяет выделить одну или несколько строк, чтобы привлечь внимание пользователя. При указании в качестве параметра, вы должны передать массив значение, например, [1, 2, 3] или только номер одной строки.
html-script false Подсветка HTML
light false Включает/выключает вертикальную и горизонтальную линейки
ruler false Включает/выключает горизонтальную линейку
smart-tabs true Включает smart-табуляцию
toolbar true Включает/выключает панель помощи
wrap-lines true Включить полосу прокрутки (если длинный код)

Поделитесь ссылкой

Буду признателен, если добавите ссылку на эту страницу в социальные сети:

Поиск по сайту
Поиск от Яндекса
Рассылка

Информационный портал Subscribe.ru

Дорогие друзья!
Вы можете подписаться на рассылку материалов сайта GeoDum.ru через сервис рассылок информационного портала Subscribe.ru. Она называется, как и сайт, "Сказки старого юзера". В рассылке представляются анонсы наиболее интересных материалов из различных разделов. Обычная периодичность рассылки - раз в неделю (по вторникам).

ПОДРОБНЕЕ...

Заработок

Хотите заработать на своем сайте? Тогда зарегистрируйтесь на этих ресурсах по моим реферальским ссылкам:

  • Kwork - магазин услуг фрилансеров.
  • MegaIndex - бесплатный анализ сайта.
  • Advego - заработок написанием статей, уникальный контент для вебмастеров.
  • Miralinks - заработок на размещении статей.
  • Webartex - заработок на написании и размещении статей.
gototop