В предыдущих статьях было рассмотрено то, как установить подсветку кода с помощью подключения библиотеки highlight.js со стороннего сайта и то, как собрать и скачать файлы для установки highlight.js на сайт. Но так как нет ничего вечного, плюс никто не знает, сколько будет поддерживаться проект highlight.js его разработчиком и сколько времени ещё будут доступны файлы этой библиотеки на стороннем сервере, то в этой статье разберём, как установить (железобетонно) это полезное расширение к себе на сервер и подключить подсветку кода к себе на сайт, используя локальные файлы, которые никто не утащит и не потрёт.
Какие файлы highlight.js нужны для установки подсветки кода у себя на сайте
Итак, у нас есть скаченный архив, но из него для работы highlight.js нужно всего лишь два файла:
- highlight.pack.js — лежит в корне архива и содержит библиотеку для подсветки кода на страницах сайта
- 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> в коде страниц сайта.
Как видно на этой странице — всё замечательно работает!
