Комментарии

  • Главная/
  • HTML и CSS/
  • Joomla, Bootstrap и Google Prettify - качественная подсветка синтаксиса кода
Joomla, Bootstrap и Google Prettify - качественная подсветка синтаксиса кода
( 9 Голосов )

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 rel="stylesheet" href="/templates/ваш_шаблон/css/prettify.css" type="text/css"/>

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

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

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

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

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

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

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

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


Понравился материал? Пригодилась информация? Плюсани в социалки!

5 сервисов для работы с любым кодом в онлайн режиме →

Теги:

Вам также будет интересно:
 
Похожие новости
Комментарии   
Matrix
0 #1 Matrix 11.04.2017 21:51
В SLAED CMS эта фишка уже есть изначально.