Сразу хочу заметить, что имеется ввиду подсветка кода в теле опубликованного документа, а не внутри админки MODX.Редактируя и улучшая внешний вид прошлой статьи я озадачился подсветкой вставленного html кода. Голый текст смотрелся невыразительно, визуально сливался с текстом. Было несколько сложновато выделить его взглядом.
Погуглив, в интернете я, в основном, находил один способ в котором нужно было вставить внутри тега <head> штук 20 строк каких-то ссылок, потом провести еще кучу невразумительных действий. Смотрелось довольно сложно и громоздко для такого простого действия. Как потом оказалось, скрипт еще и столетней давности и уже давно не поддерживается разработчиком.
Дальнейшее гугление в поисках более легкого решения дало результат) Я нашел библиотеку highlight.js, расположенную по адресу https://highlightjs.org/
Она имеет очень симпатичный вид, автоопределение языка программирования, различные темы оформления. Отличный вариант когда нужна подсветка кода в MODX и Blogspot (blogger). Кроме того, что важно в первую очередь, удовлетворяет исходным требованиям - относительно простая установка в 3 строчки кода.
Как и указано в инструкции к установке, внутри тега <head> вставляем следующие строчки:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>Если использовать MODX то проблем с этим не возникнет. Вставляем код в нужный шаблон или чанк.
Если же использовать Blogspot (он же blogger), то нужно в настройках выбрать раздел "Шаблон", затем в появившемся окне нажать на кнопку "Изменить HTML". Появится новое окно с кодом шаблона. Вот внутрь вышеупомянутого тега <head> вставляем эти 3 строчки, но не забываем внутри первого тега <link /> поставить закрывающий слэш "/", как я написал в этом предложении. Потому что на сайте highlightjs.org в инструкции по установке этого символа в конце нет. Я потом мучался с ошибками которые выдавал Blogspot и отказывался вставлять этот код.
 |
| Как найти <head> и вставить код |
Итак, нужный код для активации highlight.js вставлен в шапке сайта. Остается вставить сам код в тело статьи и вписать до кода теги <pre><code> и </code></pre> соответственно после.
 |
| Обрамление кода тегами |
После успешного выполнения всех этих манипуляций можно наслаждаться подсветкой кода, как в данной статье.
Комментариев нет:
Отправить комментарий