Joomla 3, 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 и т.д.), то главный макет шаблона может содержатся и в других файлах шаблона. Ниже я приведу список файлов в распространенных фреймворках в которых может находится главный файл макета отвечающий за отображение сайта.
Если выше в списке вы не нашли свой фреймворк и файл отвечающий за отображение макета, то просто поищите в других файлах вашего шаблона, он обязательно там будет. Для быстрого поиска главного файла шаблона можете использовать поиск специализированным софтом или любым редактором который позволяет искать словосочетание в файлах. Для этого просто откройте папку через редактор и введите в поиск текст </body>, после чего получите результат.
Итак после того как мы нашли главный файл макета отвечающий за отображение сайта, нам нужно вставить в него следующий код:
1) Между тегами <head>...</head> вставьте такой код: <link href="/templates/ваш_шаблон/css/prettify.css" type="text/css"/> 2) Перед тегом закрывающим тегом </body>, такой код: <script src="/templates/ваш_шаблон/js/prettify.js"></script> В кратце опишу значение каждого файла который мы подключаем к сайту:
На самом деле 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 в 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 { В итоге на страницах сайта подсветка кода будет выглядеть так:
Как можно увидеть на скриншоте выше, мы изменили цвет боковой панели нумерации, изменили цвет заднего фона и изменили подсветку синтаксиса. На самом деле вы можете украсить, изменить или что-то добавить свое без каких либо проблем. Остается надеятся только на вашу фантазию.
Как можно подключить дополнительные языки для подсветки кода?На официальном сайте Google Prettify есть порядка 30 дополнительных языков для подсветки кода. Чтобы добавить поддержку дополнительного языка, <script src="/templates/ваш_шаблон/js/lang-sql.js"></script> После этого в класс тега <pre> вам нужно добавить поддержку подсветки отображения этого языка. В моем случае это lang-sql: <pre class="prettyprint linenums lang-sql"> ваш код... </pre> После этого сохраняте статью и смотрите результат. Выглядеть он будет примерно так:
Согласитесь что с подсветкой, код выглядит лучше и гораздо читабельнее чем без нее. При желании можно добавить свое оформление каждой строки. Также если вы имеете опыт работы с 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 и пр.).
Полезные ссылки:
Для примера этой статьи я использовал Joomla 3.3.3 и стандартный шаблон Protostar, который входит в стандартную сборку Joomla и работает в ней по умолчанию. Для вас я подготовил 2 архива с примерами реализации:
1 архив - сам скрипт для подключения к любому шаблону по вышеуказанной инструкции 2 архив - стандартный шаблон Protostar (Joomla 3.3.3) в который уже интегрирован скрипт подсветки кода Google Prettify. Достаточно просто заменить существующий стандартный шаблон на сайте, либо создать дубликат. Статья подготовлена специально для сайта Joomfans.com Автор: Александр Поддубный. |
|
Партнеры |
|
← Joomla 3.x, Bootstrap, Popovers и Tooltip - интерактивная карта с маркерами и подсказками | Развитие CMS Joomla на 2014-2015 годы → |
---|