пятница, 6 февраля 2015 г.

Подсветка синтаксиса в в blogger

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

Подсветка синтаксиса использует Java-script библиотеку SyntaxHighlighter

Итак, открываем панель блоггера, переходим в Шаблон › Изменить HTML и находим там строчку такого вида (у вас может быть другая, главное - чтобы были теги <title>):





Также, чтобы в браузере Google Chrome не было глюков с нумерацией строк, нужно найти строчку: /* Content ----------------------------------------------- */
.syntaxhighlighter table td.gutter .line
{
    padding: 0 5px !important;
}
Всё, теперь чтобы сделать подсветку кода нужно сделать следующее: во время написания статьи переходим из режима Создать в HTML. и в нужном месте делаем теги и вставляем туда код (например, для подсветки синтаксиса Python)


pre class="brush:python" ... pre


После brush: указываем язык кода: html, js, css и т. д. А между ними вставляем код. Для питона код можно вставлять "как есть", а вот если код html, то нужно его закодировать html-кодировкой спец символов - для того, чтобы код поспринимался именно как текст, а не как теги. Делается это или вручную :) или с помощью сайтов вроде этого http://www.string-functions.com/htmlencode.aspx

0 коммент.:

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