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

При публикации на страницах блога программного кода, возникает вопрос его красивого, и главное, доступного, оформления.

Пост о том, как в blogger добавить возможность подсвечивать синтаксис для кодов php, sql, html и xml.

Как установить:




Заходим в настройки, выбираем вкладку "Дизайн"  и "Изменить HTML". далее в окне редактора шаблона, после тега <title><data:blog.pageTitle/></title> пишем следующее:

<link href='https://dl.dropboxusercontent.com/u/72419062/JS/SyntaxLight/shCore.css' rel='stylesheet' type='text/css'/>

<link href='https://dl.dropboxusercontent.com/u/72419062/JS/SyntaxLight/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='https://dl.dropboxusercontent.com/u/72419062/JS/SyntaxLight/shCore.js' type='text/javascript'/>

<!-- add brushes here -->

<script type='text/javascript'>

  SyntaxHighlighter.config.bloggerMode = true;

  SyntaxHighlighter.all();

</script>

После комментария "add brushes here," добавляем скрипты для обработки тех языков, подсветку которых мы хотим использовать. В следующем примере будет использована подсветка для Javascript, SQL, XML/HTML, and PHP:

<script src='https://dl.dropboxusercontent.com/u/72419062/JS/SyntaxLight/shBrushJScript.js' type='text/javascript'/>

<script src='https://dl.dropboxusercontent.com/u/72419062/JS/SyntaxLight/shBrushPhp.js' type='text/javascript'/>

<script src='https://dl.dropboxusercontent.com/u/72419062/JS/SyntaxLight/shBrushSql.js' type='text/javascript'/>

<script src='https://dl.dropboxusercontent.com/u/72419062/JS/SyntaxLight/shBrushXml.js' type='text/javascript'/>

Осталось только сохранить изменения шаблона и приступать к использованию. Для того чтобы скрипт автоматически "раскрашивал" и размечал код, его необходимо разместить в теги <pre class="brush:[язык подсветки]">. Например, для подсветки блока с SQL-запросом:

<pre class="brush:sql">

SELECT *

FROM users

WHERE user_id = 1212;

</pre>