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

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

Честный VDS/VPS, на котором «Лунная База» живет уже 20+ лет

Задумываетесь о том, чтобы поднять свой pet-проект, сайт клиента или настроить окружение для разработки? Уже пора подумать, где арендовать железо.

Лунная База хостится на FirstVDS более 20 лет. Мыслей о том, чтобы перебраться на другой хостинг, не было ни разу (хотя опыт работы с другими вариантами, конечно, есть).

Бывали разные ситуации, но они бывают на любом железе. Главное, что нужно понять: здесь нет маркетинговой шелухи и сказок про «мы всё сделаем за вас». Если вы берете VDS — вам дают полный root, возможность накатить любую ОС и не лезут в ваши конфиги.

Если в саппорт написать с вопросом по вашему коду и получить ответ: «Читайте документацию и разбирайтесь сами» или «Обратитесь к профильному специалисту» — это не повод обижаться. Это повод углубить свои знания в DevOps и сайтостроении! Бегите от тех, кто пообещает: «Мы всё чиним и настраиваем абсолютно бесплатно!». Никто никогда не работает «по доброте душевной» в ущерб себе, а бесплатный сыр в администрировании обычно заканчивается сломанной базой данных.

Что по факту: Гибкое масштабирование ядер и RAM, экономия по сравнению с физическими серверами и адекватная панель ispmanager, если она вам нужна.

Посмотреть тарифы VDS/VPS

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

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

Как выглядит сайт с подсветкой кода 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> и в документ вставлены приведённые выше три строчки, всё должно сразу заработать и код, приводимый на любой странице, где выполняются эти условия должен быть подсвечен.

Самый честный хостинг за 20+ лет существования Лунной Базы

Задумываешься о том, чтобы поднять свой сайт в Интернете? Уже пора подумать о том, какой хостинг выбрать?

Лунная База хостится 20+ лет на firstDVS. При этом, мыслей о том, чтобы перебраться на другой хостинг не было. (Но, при этом есть опыт работы с другими вариантами.)

Бывали с firstDVS разные ситуации, но, они бывают на всех хостингах. Единственное, что тут важно понять, - это то, что никто ничего тебе не будет впаривать... Но, и работать за тебя тоже никто не станет. Если в саппорт ответили: «Читайте по ссылке и разбирайтесь сами...» или вообще «Обратитесь за помощью к специалисту», - это повод углубить свои знания в области сайтостроения, а не бежать к тем, что пообещают: «Мы всё чиним и всё делаем за своих клиентов абсолютно бесплатно!» Никто никогда ничего ни за кого "по доброте душевной" не делал, не делает и не будет делать!

Выбрать