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

Быстрая установка подсветки кода с помощью подключения библиотеки highlight.js

Для того, чтобы сайт, на котором размещены листинги программ на различных языках программирования не только выглядел красиво, но и им было удобно пользоваться, часто прибегают к подсветке синтаксиса приводимого кода программ. Для этих целей очень подходит библиотека написанная на JavaScript и имеющая большой набор стилей css для создания удобного с точки зрения владельца сайта дизайна. Эта библиотека — highlight.js.



Как выглядит сайт без подсветки кода

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

Как выглядит сайт без подсветки кода

Как выглядит сайт с подсветкой кода highlight.js на базовом шаблоне

В этой статье разберём, как быстро подключить подсветку кода с помощью свободно распространяемой библиотеки с открытым кодом highlight.js на базовом шаблоне. И даже при использовании базового шаблона, чтение кода значительно упрощается, так как основные синтаксические языка программирования выделяются в тексте кода. Что позволяет при изучении кода выделять то, что требуется для разбора того, как работает написанная программа. Это делает масса современных текстовых редакторов, почему бы не облегчить жизнь себе и тем, кто будет изучать написанный код, который размещён на сайте? Сайт с подсветкой кода highlight.js на базовом шаблоне выглядит уже так:

 Сайт с подсветкой кода highlight.js на базовом шаблоне выглядит уже так

Уже видно, где располагаются переменные, а также хорошо выделяются комментарии, которые не влияют на работу кода. Удобно! =)

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

Для того, чтобы подсветить код у сея на сайте, нужно чтобы этот код был обрамлён HTML-тегами <pre><code>...</code></pre>. Именно эти теги и именно в такой последовательности позволяют библиотеке highlight.js находить те участки HTML-документа, которые требуется подсветить. теги <pre> и <code> могут иметь собственные классы, а могут быть и без них. Важно, чтобы css классы библиотеки highlight.js не пересекались с имеющимися css классами, а это значит, что код для вставки css должен располагаться ниже, чем основной код шаблона страницы (если он имеется).

Поэтому, в идеале вставлять код css библиотеки highlight.js лучше перед закрывающим тегом </head>. Кроме css-свойств для разметки подсветки требуется внедрить JS-код, который нужен для работы этой библиотеки. Итак, для быстрой вставки требуется всего лишь вставить две строки в код страницы перед тегом </head> и всё должно заработать, так как файлы с css и js лежат в открытом доступе на внешнем сервере. Вот эти две строки:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/styles/shades-of-purple.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.8/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

А третья строка нужна для активации библиотеки highlight.js. =)

Резюме

Таким образом, если код обрамлён HTML-тегами <pre><code>...</code></pre> и в документ вставлены приведённые выше три строчки, всё должно сразу заработать и код, приводимый на любой странице, где выполняются эти условия должен быть подсвечен.

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

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

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