Как сделать подсветку кода на сайте

admin

8 лет назад

Из всех доступных скриптов в Интернете, которые целенаправленно раскрашивают указанные блоки на веб-страницах, довольно много, но вот для себя я выбрал один – highlight, который написал Иван Сагалаев. Всегда знал, что наши программисты умнее индусов.

Помимо того, что этот скрипт был написан русским парнем, он обладает довольно широкими возможностями. На блоге автора можно найти сам скрипт, примеры его реализации, различные оформления и много чего другого.

Забыл пояснить, что применение этого скрипта оправдано только на сайта, которые в какой-то мере посвящены информационным технологиям. На сайтах, где основная тема домашний очаг, кулинария или мода, почти 30 Кбайтный скрипт будет точно лишним. Хотя вроде как можно его обучить и раскрашиванию рецептов. :)

Устанавливаем подсветку синтаксиса на сайте

Для того, чтобы наши потуги имели успешный результат нам необходимо выполнить пару шагов:

загружаем сам скрипт с сайта автора здесь. Кстати, там можно даже выбрать нужные языки, которые Вам нужно подсвечивать. Если у Вас как и у меня не скачалось, то это можно сделать отсюда (внутри архива сам скрипт и две темы оформления: default и dark).
помещаем распакованные файлы в корень сайта (можно и в другое место, но тогда следует поправить приведенный код в пункте ниже).
далее между htm-тегами <HEAD>…</HEAD> нужно добавить 3 строчки:
```
<link rel="stylesheet" href="/default.css">
<script src="/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
```
Которые в последствии ко всему тексту, помещенному между html-тегами <pre><code>…</pre></code>, будут применять подсветку.

Язык подсветки будет выбираться автоматически. В архиве, который находится на этом блоге присутствуют языки программирования: HTML/XML, Javascript, CSS, PHP, Ruby, Perl, Python, C++, C#, Java, SQL и Bash. Думаю, что вполне хватит для нормальной работы среднестатистического вебмастера и системного администратора, как я.

P.S. Кстати, для меня было огромной новостью узнать, что если код обрамить <pre><code>…</pre></code>, то он будет выводится как есть. Таким образом удобно выводить html-теги для примера, которые раньше мне приходилось дополнительно редактировать, заменяя все специальные знаки на их XML-значениями.
Источник