Вставка и подсветка кода в Joomla – скрипт highlight

От автора

Что вы будете делать, если нужно показать код в своей статье на Joomla? Воспользуетесь тегом <pre>? Вряд ли у вас это получится на Joomla. Будете искать плагин Syntax Highlighter для Joomla? Так он давно «умер». Рекомендую, для этих целей использовать кастомный скрипт highlight.js.

Скрипт highlight.js

Использование скрипта highlight.js хороший повод разобраться, как применять костомные скрипты на Joomla!CMS. Понятие костомный означает, что этот скрипт написан специально для решения определенных задач. Кроме этого его можно использовать не только на CMS Joomla. Он универсален и будет работать на других системах.

highlight.js script 1

Скачать скрипт highlight.js нужно только на официальном сайте. Вот ссылка https://highlightjs.org/. Скачивается скрип легко, без регистрации. Вот как авторы описывают его возможности:

Скрип поддерживает синтаксис 176 языков и имеет 79 различных стилей css;

  • Есть функция автоматического определения языка;
  • Универсальное выделение кода;
  • Доступно для node.js;
  • Работает с любой разметкой;
  • Совместим с любой js-структурой.

Как установить и настроить работу скрипта highlight.js

Для установки и настройки скрипта воспользуйтесь маленькой инструкцией.

Шаг 1.

Скачать скрип с официального сайта (highlightjs.org).

Шаг 2.

По FTP залейте каталог скрипта [highlightjs] в каталог вашего рабочего шаблона, [/path/templates/youtemplate/].

highlight.js script 3

Шаг 3.

В блокноте Notepad++ или аналогах, составьте три кодовые строки:

<link rel="stylesheet" href="/templates/ youtemplate /highlight/styles/dark.css">
<script src="/ youtemplate /highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

, где

Youtemplate название каталога вашего шаблона, куда вы закачали каталог скрипта [highlightjs].

Здесь используется стиль dark.css. Это один из 79 стилей используемых в скрипте. Название  других стилей посмотрите в папке highlight/styles. Например, чтобы использовать стиль dracula, вместо dark.css впишите dark.css. Стиль по умолчанию (стандартный серый) носит название default.css.

highlight.js script 2

Шаг 4.

  • Идите в административную часть сайта на вкладку Расширения>>>Шаблоны;
  • Откройте рабочий шаблон для редактирования кода;
  • Нам нужен файл index.php, откройте его для редактирования;
  • Сделайте его копию и перенесите её в Notepad++;
  • Теперь вам нужно первую строку составленного кода <linl rel…> добавить  ДО тега </head>, а две вторые строки кода добавить ДО тега </body>.

Важно! Если у вас установлен настраиваемый шаблон, то в настройках, скорее всего, есть настройки «Custom Code», где есть блоки Before </head> и  Before </body>, лучше вставить коды в эти блоки.

  • Сохраните изменения.

Как использовать скрипт highlight

Теперь, чтобы «подсветить» код в статье сайта, достаточно использовать универсальный код, для всех языков:

<pre><code>...</code></pre>

Или применять выделение для каждого языка в отдельности, например, так для html кода:

<pre><code class="html">...</code></pre>

Для продвинутых пользователей

Более широкие возможности для использования скрипт highlight посетите:

  • Официальный сайт библиотеки: https://highlightjs.org/.
  • Документацию по API: http://highlightjs.readthedocs.io/.

©Joomla-abc.ru

Еще статьи