пятница, 26 сентября 2014 г.

Публикация исходного кода (подсветка синтаксиса) на Blogger

На Blogger.com (Blogger.ru), к сожалению, не предусмотрен изначально функционал для публикации фрагментов исходного кода, а точнее для подсветки синтаксиса в опубликованных фрагментах.
Но т.к. на Blogger можно произвольно редактировать шаблон блога, подсветку синтаксиса в блоге очень просто реализовать самостоятельно, используя стороннее решение - highlight.js.
Нужно открыть панель администрирования блога - Шаблон - Изменить HTML.


Добавьте в <head> </head> вашего блога:
<link href='http://yandex.st/highlightjs/8.2/styles/default.min.css' rel='stylesheet'/>
<script src='http://yandex.st/highlightjs/8.2/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
или
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
У атрибута href в теге link в конце default можно заменить на другой стиль. Полный список см. по этой ссылке. Но вне зависимости от выбранного стиля, заканчиваться он должен на .min.css. Т.е. по ссылке на гитхабе default.css, а в href надо писать default.min.css, аналогично и у других стилей. В моем блоге используется стиль github.
После добавления строк сохраните шаблон. Теперь при добавлении записей, переключаете вкладку "Создать" на "HTML", используйте теги
<pre><code> здесь ваш код </code></pre>
У тега code можно использовать атрибут class с явным указанием языка, например, <code class="python">. Ну и небольшой совет сразу, если код содержит html-теги, лучше поставить на вкладке "HTML" <pre><code> ... </code><pre>, вернуться обратно на вкладку "Создать" и заменить ... на код. Иначе при публикации код просто не отобразиться. Это фича Blogger'а, все теги, введенные на вкладке "HTML", будут восприниматься как часть разметки. А если ввести их на вкладке "Создать", скобы и кавычки преобразовываются в другие символы и при публикации все будет отображаться корректно.

По умолчанию, highlight.js поддерживает 22 языка программирования, разметки, запросов и т.д. (включая html, css, javascript, php, python, perl, sql, Java, C++ и т.д.), но при желании можно сформировать свою сборку. Можно как увеличить, так и уменьшить набор. Просто перейдите по ссылке, поставьте галочки в нужные чекбоксы и нажмите "Download". Естественно, собственноручно сформированный набор нужно размещать на каком-то сервере самостоятельно.

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

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