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

Отредактировано: 06 Января 2018

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

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

Для начала, скачаем последнюю версию библиотеки из архива Google;
Извлечем данные из архива и закинем на сервер файлы prettify.js и prettify.css;
Подключим .css файл в блоке между <head> и </head> нашего сайта:
```
<link rel="stylesheet" href="http://site.dom/prettify.css" />
```
Далее подключим .js файл:
```
<script src="http://site.dom/prettify.js"></script>
```
Убедитесь что указали правильный адрес до файлов
Инициализируем выполнение скрипта. Это можно сделать двумя способами:
- В файле где хранятся все скрипты сайта прописать prettyPrint();
- Либо вставить вызов в шаблоне сайта:
```
<script>
   window.onload = (function(){ prettyPrint(); });
</script>
```
Теперь, если хотите чтобы синтаксис начал подсвечиваться, просто укажите блоку <pre> класс prettyprint.

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

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

back-end global