четверг, 9 февраля 2017 г.

Вставка форматированного кода с подсветкой синтаксиса на сайт


Существует замечательная библиотека подсветки синтаксиса highlight.js. На данный момент она поддерживает 169 языков программирования и 77 стилей. Определение языка происходит автоматически, правильно подсвечиваются даже разные языки, помещенные в один блок.


На странице demo можно выбрать стиль. Мне ближе стили Visual Studio, поэтому выбрала VsФайл стилей называется "vs.min.css".

Можно скачать файлы и разместить у себя на сервере, но для использования в Blogger проще воспользоваться сервисом cdnjs.com и взять ссылки на эти файлы с него.

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/vs.min.css" rel="stylesheet"></link>


Изменение шаблона:

1) заходим в админку Blogger. Выбираем в списке блогов нужный и кликаем по его названию;

2) нажимаем на пункт меню "Шаблон";

3) находим на открывшейся странице элемент с названием "Сейчас в блоге", под которым имеется кнопка "Изменить HTML". Нажимаем на нее;

4) в открывшемся редакторе перед </head> вставляем наши теги из последнего листинга;

5) жмем кнопку "Сохранить шаблон".

Использование:

Набираем сообщение, в том числе программный код (в режиме "Создать"). Затем переходим в режим "HTML" и каждый блок кода обрамляем парами тегов <pre><code> слева (перед) и </code></pre> справа (после). Сохраняем.

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

Отправить комментарий