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

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

Я вообще не понимаю как я жил до этого, когда не было автоматической подсветки кода, хоть пусть она и сделана и на JavaScript.

Этим самым нововведением я избавил себя от постоянной головной боли по приданию выводимых фрагментов кода более менее читаемого вида. Для меня хорошо и посетителям этого блога удобнее понимать информацию.

Короче, сплошные плюсы.

Какую систему выбрать?

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

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

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

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

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

  1. загружаем сам скрипт с сайта автора здесь. Кстати, там можно даже выбрать нужные языки, которые Вам нужно подсвечивать. Если у Вас как и у меня не скачалось, то это можно сделать отсюда (внутри архива сам скрипт и две темы оформления: default и dark).
  2. помещаем распакованные файлы в корень сайта (можно и в другое место, но тогда следует поправить приведенный код в пункте ниже).
  3. далее между 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-значениями.

Комментарии:

  1. Петр Александрович опубликовал комментарий 16 Июль 2012, 22:41 #

    Здравствуйте. Читаю постоянно ваш блог множество всего интересного, вот не получается у меня никак вставить код, тоесть проблема вот в чем..сделал каталог сайтов и нужно доавить в форму добавления сайта в каталог код кнопки чтоб брали и вставляли себе на сайт, почемуто код кнопки никак не выходит поставить, высвечивается сама кнопка, вы не знаете как можно исправить? уже замучился

    | Ответить
    • Mut@NT опубликовал комментарий 17 Июль 2012, 07:11 #

      Вам необходимо просто поместить код кнопки в теги <pre><code>КОД КНОПКИ</code></pre>

      | Ответить
  2. Joseph опубликовал комментарий 13 Декабрь 2012, 10:30 #

    наверное, <pre><code>…</code></pre>,

    | Ответить
  3. Константин опубликовал комментарий 3 Август 2015, 05:03 #

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

    | Ответить
Имя
e-mail
Сайт
Текст комментария: