Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

Установка на сайт подсветки кода с помощью подключения библиотеки highlight.js

В предыдущих статьях было рассмотрено то, как установить подсветку кода с помощью подключения библиотеки highlight.js со стороннего сайта и то, как собрать и скачать файлы для установки highlight.js на сайт. Но так как нет ничего вечного, плюс никто не знает, сколько будет поддерживаться проект highlight.js его разработчиком и сколько времени ещё будут доступны файлы этой библиотеки на стороннем сервере, то в этой статье разберём, как установить (железобетонно) это полезное расширение к себе на сервер и подключить подсветку кода к себе на сайт, используя локальные файлы, которые никто не утащит и не потрёт.



Какие файлы highlight.js нужны для установки подсветки кода у себя на сайте

Итак, у нас есть скаченный архив, но из него для работы highlight.js нужно всего лишь два файла:

  1. highlight.pack.js — лежит в корне архива и содержит библиотеку для подсветки кода на страницах сайта
  2. CSS-файл из папки styles — какой конкретно, зависит от того, какой конкретно шаблон был выбран.

Куда положить файл highlight.pack.js у себя на сервере

Сначала разберёмся с первым файлом. Он содержит JavaScript-библиотеку с тем набором языков, который был выбран при формировании архива на сайте разработчика. Он уже оптимизирован и его можно выложить на сервер в папку сайта так, как он есть в архиве. Куда конкретно его положить? Я его положил в папку js шаблона сайта. Не имеет особого значения, куда  его положить, главное, чтобы он был доступен из браузера. И конечно нужно знать путь до него, так, чтобы при его вызове он открывался. Так, например у меня, он лежит по этому адресу:

https://mb4.ru/templates/protostar/js/highlight.pack.js

Где взять оптимизированный css-файл со стилями шаблона highlight.js

С файлами css с шаблоном цветовой подсветки немного сложнее. В архиве хранятся не оптимизированные css-файлы. В интернете есть масса он-лайн сервисов, которые уберут лишние пробелы из этих файлов и оптимизируют его размер для того, чтобы выложить их на сайт, но можно взять этот оптимизированный файл с файлового хранилища разработчика. Узнать путь до этого файла можно так, как описано в статье по первой ссылке во вступлении.

Можно конечно выложить и не оптимизированный css-файл шаблона, но всякие Google Page Speed будут по этому поводу ругаться. Но при этом всё будет работать. В общем, для SEO полезнее выкладывать ужатый файл. Дальше — каждый решает за себя сам.

CSS-файл шаблона нужно также залить на сервер так, как было описано выше про js-файл. Я у себя его положил в папку css шаблона сайта. Там ему самое место:

https://mb4.ru/templates/protostar/css/shades-of-purple.css

Как подключить библиотеку highlight.js для подсветки кода на сайте

После того, как оба файла загружены на сервер в папку сайта, нужно прописать пару строчек в код страниц сайта (скорее всего в файл index.php шаблона сайта, но всё зависит от того, на чём написан и работает сайт). Я использовал такой код для подключения библиотеки highlight.js для подсветки кода у себя на сайте:

<link rel="stylesheet" href="/templates/protostar/css/shades-of-purple.css">
<link rel="preload" href="/templates/protostar/js/highlight.pack.js" as="script">
<script src="/templates/protostar/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
  • 1-я строка — подключение css-стилей шаблона
  • 2-я строка — предзагрузка js-библиотеки (для оптимизации скорости отображения страницы в браузере пользователя)
  • 3-я строка — подключение js-библиотеки
  • 4-я строка — включение (активация) библиотеки для подсветки кода на странице

Резюме

Таким образом можно скачать файлы с сайта разработчика, найти оптимизированный код css-файла (или самим его оптимизировать), залить файлы на сервер и подключить их в шапке сайта до закрывающего тега </head> в коде страниц сайта.

Как видно на этой странице — всё замечательно работает!

Заберите ссылку на статью к себе, чтобы потом легко её найти ;)

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )