Тематика: По цвету: Красный Желтый Зеленый Синий Оранжевый Розовый Серый Белый Черный Мульти

Ваш сайт на CMS Joomla? Добавьте его в галерею Joomfans!

Вы можете совершенно бесплатно добавить ваш веб-сайт в нашу галерею сайтов. Подробнее...

Галерея Добавить

Главная Статьи Блог Joomla 3, Bootstrap и Google Prettify - качественная подсветка синтаксиса кода
Joomla 3, Bootstrap и Google Prettify - качественная подсветка синтаксиса кода

Joomla, Bootstrap и Google Prettify - качественная подсветка кодаВ последнее время в шаблонах Joomla, разработчиками очень часто используется фреймворк Bootstrap. Многие сайты публикуют на своих сайтах различный код (php, html, css, js и пр.). По умолчанию в Joomla вы можете использовать теги <pre> или <code> и оформлять их по своему желанию в CSS файле шаблона, но в данном случае в блоке оформления кода не будет подсветки этого кода.

 

Конечно можно использовать сторонние плагины для обработки кода, например плагин - CodeCitation или использовать движок GeSHi и тому подобные, но этим самым вы просто будете нагружать и так уже нагруженную CMS. В данной статье я хотел бы рассказать вам как можно добавить в шаблон Joomla обработку кода с помощью Google Prettify, jQuery и Bootstrap без необходимости установки каких либо дополнительных плагинов которые будут засорять систему и БД.

 

Итак. Для начала у вас должен быть установлен шаблон Joomla с поддержкой Bootstrap. Далее вам необходимо скачать скрипт Google Prettify с нашего сервера либо полный пакет с официального сайта (ссылка есть внизу страницы). Если вы скачали наш архив, то просто распакуйте и скопируйте содержимое архива, а именно папки CSS и JS в папку с вашим шаблоном. Пример: templates/ваш_шаблон/...

 

После того как вы скопировали файлы, вам необходимо открыть главный файл вашего шаблона и вставить туда код который будет отвечать за вывод скрипта. Сразу хочу предупредить что все шаблоны разные и главный макет шаблона не обязательно должен находится в файле index.php вашего шаблона. Если вы используете какие либо фреймворки (Gavern, T3, Gantry и т.д.), то главный макет шаблона может содержатся и в других файлах шаблона. Ниже я приведу список файлов в распространенных фреймворках в которых может находится главный файл макета отвечающий за отображение сайта.

 

  • Стандартный шаблонtemplates/ваш_шаблон/index.php
  • Gavern (GavickPro)templates/название_шаблона/layouts/default.php
  • Gantry (RocketTheme) — templates/название_шаблона/index.php
  • YJSG (YouJoomla) — templates/название_шаблона/index.php
  • T3 (JoomlArt) — templates/название_шаблона/tpls/default.php
  • Warp (YooTheme) — templates/название_шаблона/layouts/theme.php

 

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

 

Итак после того как мы нашли главный файл макета отвечающий за отображение сайта, нам нужно вставить в него следующий код:

 

1) Между тегами <head>...</head> вставьте такой код:

<link href="/templates/ваш_шаблон/css/prettify.css" type="text/css"/>

2) Перед тегом закрывающим тегом </body>, такой код:

<script src="/templates/ваш_шаблон/js/prettify.js"></script>  
<script src="/templates/ваш_шаблон/js/prettify-run.js"></script>

В кратце опишу значение каждого файла который мы подключаем к сайту:

  • prettify.css - стиль для обработки полей кода. Можно легко добавлять свои стили оформления
  • prettify.js - сам скрипт Google Prettify. Это минимальный и сжатый файл скрипта.
  • prettify-run.js - непосредственный запуск скрипта. Тут можно также добавить различные параметры при запуске (об этом я напишу ниже в данной статье).

 

На самом деле JS скрипты можно также подключить до тега </head>. Но для более быстрой загрузки сайта, я рекомендую подгружать их в самом низу страницы, т.е. до тега </body>.

 

Для того чтобы отобразить подсветку синтаксиса кода на сайте нужно в тег <pre> добавить класс prettyprint. Ниже вы увидите 2 варианта отображения подсветки:

 

1) Подсветка кода без нумерации:

<pre class="prettyprint"> ваш код... </pre>

2) Подсветка кода с автоматической нумерацией

<pre class="prettyprint linenums"> ваш код... </pre>

 

Ниже на скриншоте я представил 2 варианта отображения Google Prettify в CMS Joomla 3.x на стандартном шаблоне Protostar. В первом варианте кода показан CSS код без нумерации строк с CSS классом prettyprint. Во втором варианте отображения кода, показан JS код с нумерацией и использованием класса prettyprint linenums. Нумерация проставляется автоматически благодаря скрипту Google Prettify.

 

Работа скрипта Google Prettify в CMS Joomla 3.x 

В принципе для подсветки кода с помощью Google Prettify в Joomla 3, достаточно добавить то что я написал выше и все будет работать отлично. Но вы также можете добавить различные дополнения к обработке кода или упростить добавление подсветки кода на свой сайт. Об этом я и хочу написать ниже.

 

Что делать если у меня уже используется в статьях тег <pre>?

Итак, давайте разберем с вами такую ситуацию: У вас старый сайт и вы уже давно добавляете тег <pre> на свой сайт и он уже добавлен в сотни статей на вашем сайте. Что же теперь делать чтобы добавить к существующим тегам <pre> класс prettyprint или prettyprint linenums?

 

1 вариант.

Зайти в базу данных и сделать запрос замены текста с тега <pre> на тег <pre class="prettyprint..."> 

 

2 вариант.

Более простой. Нужно просто добавить 1 строчку в файл prettify-run.js, после чего на странице ко всем тегам <pre> будет добавлен нужный вам класс. Пример строки который будет делать подмену с помощью JS:

$( 'pre' ).addClass( 'prettyprint' );

либо если хотите добавить пронумерованную подсветку кода, нужно вставить данный код:

$( 'pre' ).addClass( 'prettyprint linenums' );

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

 

Как можно использовать свои стили оформления?

Вы можете украсить отображение кода по своему усмотрению, чтобы он вписался в общий дизайн сайта, просто отредактировав CSS файл - prettify.css. Для примера я покажу вам как оформить подсветку кода для темных шаблонов. Открываем CSS файл и вставляем туда следующий код:

.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #202020, inset 41px 0 0 #202020;
-moz-box-shadow: inset 40px 0 0 #202020, inset 41px 0 0 #202020;
box-shadow: inset 40px 0 0 #202020, inset 41px 0 0 #202020;
}
pre.prettyprint { display: block; background-color: #333 }
pre .nocode { background-color: none; color: #000 }
pre .str { color: #ffa0a0 }
pre .kwd { color: #f0e68c; font-weight: bold }
pre .com { color: #87ceeb }
pre .typ { color: #98fb98 }
pre .lit { color: #cd5c5c }
pre .pun { color: #fff }
pre .pln { color: #fff }
pre .tag { color: #f0e68c; font-weight: bold }
pre .atn { color: #bdb76b; font-weight: bold }
pre .atv { color: #ffa0a0 }
pre .dec { color: #98fb98 }

В итоге на страницах сайта подсветка кода будет выглядеть так:

Свой черный стиль оформления для Google Prettify 

Как можно увидеть на скриншоте выше, мы изменили цвет боковой панели нумерации, изменили цвет заднего фона и изменили подсветку синтаксиса. На самом деле вы можете украсить, изменить или что-то добавить свое без каких либо проблем. Остается надеятся только на вашу фантазию.

 

Как можно подключить дополнительные языки для подсветки кода?

На официальном сайте Google Prettify есть порядка 30 дополнительных языков для подсветки кода. Чтобы добавить поддержку дополнительного языка, скачайте нужный вам язык с официального сайта (выглядит он таким образом: lang-***.js, где символы звездочки это название), далее скопируйте скачанный язык в туже папку где и лежит скрипт Google Prettify, после чего добавьте загрузку скрипта в файле шаблона (как выше мы добавляли поддержку самого скрипта). В моем случае я подключаю подсветку SQL языка,

<script src="/templates/ваш_шаблон/js/lang-sql.js"></script>

После этого в класс тега <pre> вам нужно добавить поддержку подсветки отображения этого языка. В моем случае это lang-sql:

<pre class="prettyprint linenums lang-sql"> ваш код... </pre>

После этого сохраняте статью и смотрите результат. Выглядеть он будет примерно так:

Дополнительные языки подсветки синтаксиса Google Prettify 

Согласитесь что с подсветкой, код выглядит лучше и гораздо читабельнее чем без нее. При желании можно добавить свое оформление каждой строки. Также если вы имеете опыт работы с JS, вы легко можете создавать свою подсветку для любого языка программирования. Хотя думаю вам этого не понадобится т.к. в базовой версии скрипта имеется поддержка практически всех популярных языков. Так что с этим проблем у вас не должно возникнуть.

 

Какие плюсы мы получим при использовании Google Prettify в Joomla 3?

1. Подсветку практически любого существующего кода + возможность добавлять свои стили для языков

2. Очень маленький вес скрипта, всего 14кб.

3. Нет необходимости использовать сторонние плагины и дополнения

4. Быстрая обработка подсветки синтаксиса кода без какой либо тяжелой нагрузки на сервер

5. Простая интеграция с Joomla (можно также интегрировать в любую другую CMS)

 

В статье я описал подробное подключение скрипта Prettify в Joomla 3.x. Вы также можете использовать и другие версии Joomla, но в таком случае вам нужно будет добавлять библиотеку jQuery (т.к. в более ранних версиях используется Mootools). Кроме Joomla, вы также по этой схеме, можете подключить данный скрипт к любой другой CMS (Wordpress, Drupal, InstantCMS и пр.).

 

Полезные ссылки:

Загрузка скрипта с оф.сайта Google Prettify

Дополнительные языки для подсветки

Страница помощи по скрипту

Дополнительные темы оформления

 

Для примера этой статьи я использовал Joomla 3.3.3 и стандартный шаблон Protostar, который входит в стандартную сборку Joomla и работает в ней по умолчанию. Для вас я подготовил 2 архива с примерами реализации:

 

1 архив - сам скрипт для подключения к любому шаблону по вышеуказанной инструкции

2 архив - стандартный шаблон Protostar (Joomla 3.3.3) в который уже интегрирован скрипт подсветки кода Google Prettify. Достаточно просто заменить существующий стандартный шаблон на сайте, либо создать дубликат.

Статья подготовлена специально для сайта Joomfans.com

Автор: Александр Поддубный. 

Партнеры

 

Литература

8 видеоуроков по…

На днях популярная и известная студия по разработке шаблонов и…

Joomla!…

Если вы часто создаете сайты на CMS Joomla! 1.6, 1.7 или 2.5 то вы…

10 легких шагов к…

Прочитав книгу Хагена Графа «10 легких шагов к освоению Joomla! 3.0»…

Joomla! 2.5 -…

Книга «Joomla! 2.5 - Руководство для начинающего пользователя»…

Инструменты

Akeeba SiteDiff

При создании сайта, всегда есть вероятность того что он будет взломан…

Morph Framework

Последняя обновленная и уже совершенно бесплатная версия фреймворка…

CodeLobster PHP…

Очень мощный и многофункциональный редактор РНР, HTML, CSS,…

JB Zen Grid Framework…

Последняя обновленная версия фреймворка Zen Grid от студии…