Для того, чтобы сайт, на котором размещены листинги программ на различных языках программирования не только выглядел красиво, но и им было удобно пользоваться, часто прибегают к подсветке синтаксиса приводимого кода программ. Для этих целей очень подходит библиотека написанная на JavaScript и имеющая большой набор стилей css для создания удобного с точки зрения владельца сайта дизайна. Эта библиотека — 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> и в документ вставлены приведённые выше три строчки, всё должно сразу заработать и код, приводимый на любой странице, где выполняются эти условия должен быть подсвечен.
Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)
