http://stackoverflow.com/questions/1852537/how-to-use-prettify-with-blogger-blogspot
и
http://lukabloga.blogspot.com/2008/10/to-test-new-highlighting.html
Используем подсветку синтаксиса prettify, т.к. поддерживает большинство языков/форматов.
- Авторизуемся в blogger
- Заходим в Design -> Egit HTML
- В "Edit Template" делаем поиск <head>
- После тега добавляем следующий код:
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/> <script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>
- Затем делаем поиск <body> и добавляем в конец открывающегося тега следующий код:
onload='prettyPrint()'
В моём темплейте это выглядит так:
<body expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint()'>У вас возможно в теге <body'> не будет ничего лишнего
- Нажимаем "Save Template"
- Готово
Теперь, чтобы использовать все эти радости создаем новый пост и редактируем в режиме HTML (Edit HTML), вместо Compose. Вставка кода осуществляется через открывающиеся и закрывающиеся теги <pre> или <code> -- разница между тегами только в отображении или не отображении рамки вокруг текста:
<pre class="prettyprint">...</pre>
<code class="prettyprint">...</code>
Для использования специфичной подсветки языка нужно добавить в class указание на язык вида lang-язык. Например lang-html будет выглядеть так: class="prettyprint lang-html".
Столкнулся с проблемой, когда в режиме "Edit HTML" вставляются html-теги, то парсер blogger'а ругается на используются недопустимых тегов. Обходится это заменой "<" на "<" и ">" на ">" -- это можно сделать вручную, либо перейти в режим "Compose", вставить нужный текст и вернуться обратно в режим "Edit HTML".
Комментариев нет:
Отправить комментарий