|
При написании статей об программировании и 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 нужно сначала разархивировать на локальном компьютере, потому что он скачивается у двух архивах (архив в архиве).
Чтобы установить плагин, в админ-панели заходим в меню «Расширения» и выбираем пункт «Установить/удалить», потом выбираем архив плагина и нажимаем кнопку «Загрузить файл & Установить».
Теперь нужно активировать плагин. Для этого заходим в меню «Расширения» и выбираем пункт «Менеджер плагинов». В «Менеджере плагинов» ищем плагин «Content – SyntaxHighlighter» и включаем его, кликнув на белый крестик на красном кружке (рис. 2). Также можно зайти в настройки плагина и выбрать тему, которая будет определять стиль отображения исходного кода в статьях.
Пользоваться плагином очень просто. Для этого в статье исходной код нужно вставить между такими тегами:
<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).
На сайте наш исходной код будет иметь такой красивый и читабельный вид (рис. 4):
|
Z417310586352
Уроки 
