Easy Syntax Highlighter Оформление в статье Joomla листинга программного кода

Вы наверняка встречали уже на других сайтах и форумах красивое оформление вставки в статью листинга программного кода с нумерацией строк, с подсветкой разными цветами команд, операндов и комментированных строк. Сегодня мы познакомимся как это сделать у себя на сайте. Осуществление данной задачи совсем не вызывает трудностей и Вы сможете осуществить её у себя на сайте минут за 5-10 после прочтения этой статьи.

Существует стандартный метод оформления листинга программного скрипта, но выглядит он извините за выражение слишком убого. Стандартный вариант реализуется тегом <code>. Листинг программного кода, который необходимо оформить обрамляется в начале тегом <code> и в конце закрывающим тегом </code> Выглядит это следующим образом:

<div id="footer">
<div >
<jdoc:include type="modules" name="banner" />
</div>
<?php include (dirname(__FILE__).DS.'/footer.php');?>
</div>
</div>

Согласитесь - НЕ ВАРИАНТ.
Теперь знакомимся вот с таким вариантом оформления программного кода:

<div id="footer">
<div >
<jdoc:include type="modules" name="banner" />
</div>
<?php include (dirname(__FILE__).DS.'/footer.php');?>
</div>
</div>

Впечатляет?
Данный стиль оформления реализован при помощи замечательного и бесплатного плагина для Joomla и называется он Easy Syntax Highlighter. Устанавливается как и любой плагин через административную панель Joomla - меню Расширения (Extensions) - Установка и Удаление (Install/Uninstall). После установки заходим в меню Расширения (Extensions) - Плагины (Plugin Manager) и включаем его. Теперь, когда нам нужно будет выделить при помощи Easy Syntax Highlighter отрывок программного кода, нужно будет этот отрывок обрамить в начале тегом <pre class="brush: js"> и в завершении тегом </pre>.

Плагин способен автоматически распознавать очень много языков программирования: Actionscript 3, Bash, C++, C#, CSS, Delphi, Diff, Groovy, Java, JavaFX, Javascript, Perl, PHP, Plain Text, Powershell, Python, Ruby, Scala, SQL, VB и XML. В настройках плагина Вы можете настроить синтаксис каких языков следует подсвечивать или указать стиль CSS отображения. Всего Вам доброго!

Добавить комментарий