четверг, 15 января 2015 г.

Выделение листинга кода в блоге

Так как блог посвящен программированию и всему что с ним связанно, часто придётся вставлять листинг кода. К сожалению по умолчанию на донном блоге такая функция не поддерживается. В заметке описано как это было реализовано мной.

Для подсветки синтаксиса есть хорошая библиотека highlightjs.org её можно использовать и в других проектах просто скачав необходимые стили со страницы highlightjs.org/download/ галочками нужно отметить нужные языки. Вместе со стилями скачается и краткое руководство на английском и русском языках. Так же есть описание подключение здесь https://highlightjs.org/usage/.
Но нам для подключения к блогу это не потребуется. библиотеку highlightjs.org использует и Яндекс у себя в проектах и есть прямые ссылке в сети для использования данной библиотеки. Будем надеяться на надёжность Яндекса. Все стиле и сама библиотека находится в http://yandex.st/highlightjs.
Для подключения этой библиотеки перейдём к блогу по ссылке www.blogger.com/home у того блога к которому будем добавлять библиотек нажмём выпадающий список представленный на рисунке и выбираем пункт "Шаблон".
Затем под изображением блока нажимаем "Исправить HTML".
Открывается окно редактора шаблона в html формате.
Находим закрывающийся тэг </head> и перед ним вставляем следующий код

<link rel="stylesheet" href="http://yandex.st/highlightjs/8.2/styles/github.min.css"/> 
Это ссылка на применяемый стиль кода, варианты оформления можно посмотреть и выбрать на странице https://highlightjs.org/static/demo/. Для того чтобы понять стиль в блоке в выше приведённой строке меняем "github" на название понравившегося стиля. Хотя на официальном сайте доступна на момент написания версия 8.4 у Яндекса есть только версия 8.2, но для меня это не критично. Что бы использовать более ранние версии нужно в ссылке поменять 8.2 на нужную.
Далее в шаблон вставляется следующий код

<script src="http://yandex.st/highlightjs/8.2/highlight.min.js">
</script>
Это подключение самого скрипта библиотеки.
Затем вставляется скрипт инициализации библиотеки.

<script type="text/javascript">
 hljs.initHighlightingOnLoad();
</script>
Подробная документация находится по адресу http://highlightjs.readthedocs.org/en/latest/.
Также для вставки кода может потребоваться конвертация текста, которую можно сделать онлайн конвертаторами вот один из них http://htmlconvert.net/.

Список поддерживаемого синтаксиса http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html

Пример использования http://highlightjs.org/usage/

<pre><code class="html">...</code></pre>

Демо https://highlightjs.org/static/demo/

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

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