Как сделать подсветку исходного кода

При написании статей об программировании и WEB-дизайне часто приходится приводить пример исходного кода. При этом, многие текстовые редакторы для имеют возможность такой подсветки, и код выглядит красиво и читабельно (переменные выделены одним цветом, константы  другим, и т.д.). Система Joomla 1.5 имеет поддержку отображения исходных кодов с помощью плагина «Content - Code Hightlighter (GeSHi)», который отображает отформатированный код в материалах и основан на движке GeSHi. Но для форматированного отображения исходного кода удобно использовать специальный плагин для его подсветки. Одним из таких плагинов есть Joomler SyntaxHighlighter, который прост в установки и использовании. Для своей работы этот плагин использует Javascript библиотеку SyntaxHighlighter 2.0. Скачать последнюю версию плагина можно на сайте разработчика по этой ссылке: http://www.joomler.net/download/81-joomla15-plugin.html Перед установкой на сайт плагин SyntaxHighligher 2.0.1 нужно сначала разархивировать на локальном компьютере, потому что он скачивается у двух архивах (архив в архиве). Чтобы установить плагин, в админ-панели заходим в меню «Расширения» и выбираем пункт «Установить/удалить», потом выбираем архив плагина и нажимаем кнопку «Загрузить файл & Установить». Рис. 1. Установка плагина SyntaxHighligher 2.0.1. Теперь нужно активировать плагин. Для этого заходим в меню «Расширения» и выбираем пункт «Менеджер плагинов». В «Менеджере плагинов» ищем плагин «Content – SyntaxHighlighter» и включаем его, кликнув на белый крестик на красном кружке (рис. 2). Также можно зайти в настройки плагина и выбрать тему, которая будет определять стиль отображения исходного кода в статьях. Рис. 2. Активация плагина SyntaxHighlighter. Пользоваться плагином очень просто. Для этого в статье исходной код нужно вставить между такими тегами: <pre class="brush: js;">...</pre>, Где параметр для brush определяет язык программирования, на котором Вы хотите выводить исходной код. Например, если Вы хотите выводить РНР код, то нужно указать brush: php. Этот параметр поддерживает такие языки программирования: 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, text, ps, powershell, py, python, rails, ror, ruby, scala, sql, vb, vbnet, xml, xhtml, xslt, html, xhtml. Также можно задать другие параметры: Параметры плагина Параметр Значение по умолчанию Описание auto-links true Определяет, нужно ли подсвечивать ссылки в коде и делать их кликабельными class-name '   ' Позволяет добавить класс пользователя collapse false Свернутый код first-line 1 Определяет номер первой строки gutter true Включает/выключает вертикальную линейку highlight null Подсвечивает одну или несколько строчек кода html-script false Позволяет подсветку разного HTML/XML кода light false Включает/выключает вертикальную и горизонтальную линейки smart-tabs true Функция wrap - включить полосу прокрутки (если длинный код) tab-size 4 Размер табуляции toolbar true Включает/выключает панель помощи wrap-lines true Включает smart-табуляцию ruler false Вставляет горизонтальную линейку Например, код <pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>   Используется для отображения кодов языка Javascript, где подсвечены 2-я, 4-я и 6-я строчки, а также код начинается с 10 строчки. Добавлять этот код в статью нужно в режиме html (без графического редактора). Для этого в редакторе TinyMCE есть кнопка «Edit html source» (рис. 3). Рис. 3. Добавление исходного кода в статью. На сайте наш исходной код будет иметь такой красивый и читабельный вид (рис. 4): Рис 4. Вид исходного кода.