Я уже писал про подсветку синтаксиса в Octopress, которая более-менее поставляется “искаропки”. Но мне она не очень понравилась, потому я хотел перейти на что-то другое, например GeSHi (Generic Syntax Highlighter). Но так как GeSHi работает с PHP, я подключил другую подсветку синтаксиса, которая так и называется: SyntaxHighlighter.

upd. А ещё спустя какое-то время я перешёл на Highlight.js.

Расскажу про все.

SyntaxHighlighter

Начинал я с этой библиотеки.

Установка

Способов установки два:

  1. Загрузить с сайта проекта все необходимые файлы и включить их на своих страницах. Минус очевиден: обновлять их нужно будет каждый раз вручную;
  2. Использовать ссылки на файлы, любезно размещённые автором на его сервере, такой типа CDN. В имени файлов используется не номер версии, а current, так что у вас всегда будут использоваться файлы последней версии. Минусом, конечно, является возможная недоступность сервера и, как следствие, неработающая подсветка в вашем блоге.

Разумеется, я выбрал второй способ. Что нужно сделать:

  1. Подключить файлы стилей (CSS);
  2. Подключить основные скрипты;
  3. Подключить скрипты языков, для которых будет применяться подсветка синтаксиса;
  4. Активировать функции подсветки. Вот этот пункт я прозевал, потому сначала немножко побугуртил на тему да чо такое постоянно чото не работает как вы так делаете где это искать теперь.

Так как мы сообразительные чуваки, делать это всё мы будем не в каждом посте, а в подключаемых шаблонах, чтобы подстветка автоматически была доступна на всех страницах блога.

\source\_includes\custom\head.html:

<!-- подсветка синтаксиса -->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<!-- языки (сколько нужно, столько и подключайте) -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type="text/javascript"></script>

\source\_includes\custom\footer.html:

<!-- активация подсветки синтаксиса -->
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

Ну и всё.

Использование

Два способа включения подсветки синтаксиса для выбранного блока кода:

  1. Тегом <pre>: всё просто, но нужно заменять символы < и > на &lt; и &gt;, иначе браузер попытается принять их за разметку;
  2. Тегом <script>: не нужно заменять символы, но нельзя использовать внутри другие <script/>, а также содержимое не попадёт в RSS, если я правильно понял.

Мне больше по нраву <pre/>:

<pre class="brush: csharp;">
// сюда будем складывать полученные данные
Dictionary&lt;long, string&gt; infa = new Dictionary&lt;long, string&gt;();
</pre>

Настройка, ещё примеры и прочее - на сайте проекта.

Highlight.js

Затем я обнаружил вот эту библиотеку, и она мне понравилась больше, потому что она проще в использовании и все языки уже включены.

Установка

Так же запиливаем подключение библиотеки и стилей в файле \source\_includes\custom\head.html:

<!-- подсветка синтаксиса HighlightJS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/monokai-sublime.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>

Вместо стиля monokai-sublime можно выбрать любой другой: https://github.com/isagalaev/highlight.js/tree/master/src/styles

И активируем библиотеку в \source\_includes\custom\footer.html (в дополнение к SyntaxHighlighter, если хотим оставить и её):

<!-- активация подсветки синтаксиса -->
<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

Настройка стилей Octopress

Так как в Octopress есть собственные стили для обработки тегов <pre></pre>, то они немного портят вид, и нужно создать оверрайдящее CSS правило. У меня для этого выделен дополнительный файл стилей \source\stylesheets\meStyle.css, подключаемый после screen.css.

Я сделал так:

pre {
    background: none;
    border: none;
    font-size: 15px;
    color: #93a1a1;
    margin-top: 5px;
    margin-bottom: 10px;
    padding: 0px 20px 0px 20px;
}
figure.code, .gist-file, pre {
    box-shadow: none;
}

Использование

Здесь тоже < и > должны быть заменены на &lt; и &gt;:

<pre><code class="cpp">// сюда будем складывать полученные данные
Dictionary&lt;long, string&gt; infa = new Dictionary&lt;long, string&gt;();
</code></pre>

Более подробная инструкция: https://github.com/isagalaev/highlight.js/blob/master/README.md