Подсветка кода на сайте с использованием google prettify

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

Итак, начнем:

  1. Для начала, скачаем последнюю версию библиотеки из архива Google;
  2. Извлечем данные из архива и закинем на сервер файлы prettify.js и prettify.css;
  3. Подключим .css файл в блоке между <head> и </head> нашего сайта:
    <link rel="stylesheet" href="http://site.dom/prettify.css" />
  4. Далее подключим .js файл:
    <script src="http://site.dom/prettify.js"></script>

    Убедитесь что указали правильный адрес до файлов

  5. Инициализируем выполнение скрипта. Это можно сделать двумя способами:
    • В файле где хранятся все скрипты сайта прописать prettyPrint();
    • Либо вставить вызов в шаблоне сайта:
    <script>
       window.onload = (function(){ prettyPrint(); });
    </script>
  6. Теперь, если хотите чтобы синтаксис начал подсвечиваться, просто укажите блоку <pre> класс prettyprint.

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

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

 

?

Благодарю за ответ!

Была ли эта информация полезной?

Здравствуйте!

Позвольте представиться, меня зовут Марина. Более 10 лет я занимаюсь обслуживанием сайтов и развитием интернет проектов. Если вы хотите избавиться от хлопот связанных с созданием и поддержкой сайта, тогда вы попали по адресу. При работе с сайтами я предоставляю качественные услуги, ориентируясь на ваши индивидуальные потребности. Для связи со мной воспользуйтесь формой обратной связи.

Инсталента
Пожалуйста, активируйте JavaScript.
Please enable JavaScript.
return; 1