Declaration of VAR

and some other stuff

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

2014-12-06 20:16:01 +0300

2014-12-06 20:16:01 +0300 | Comments

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

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

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

SyntaxHighlighter

Сначала предлагаю сравнить её со стандартной.

Стандартная

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// объявили соединение
using (SqlConnection sqlConn = new SqlConnection("Data Source=someserver;Initial Catalog=somecatalog;Integrated Security=True"))
// объявили команду (SQL-запрос)
using (SqlCommand cmd = new SqlCommand("SELECT id, name FROM sometable;", sqlConn))
{
  // открыли соединение
  sqlConn.Open();
  // выполнили команду, получили результат
  SqlDataReader reader = cmd.ExecuteReader();
  while (reader.Read()) // перебираем результат
  {
      // и сохраняем его в наш словарь
      infa.Add((long)reader[0], (string)reader[1]);
  }
}

SyntaxHighlighter

// объявили соединение
using (SqlConnection sqlConn = new SqlConnection("Data Source=someserver;Initial Catalog=somecatalog;Integrated Security=True"))
// объявили команду (SQL-запрос)
using (SqlCommand cmd = new SqlCommand("SELECT id, name FROM sometable;", sqlConn))
{
    // открыли соединение
    sqlConn.Open();
    // выполнили команду, получили результат
    SqlDataReader reader = cmd.ExecuteReader();
    while (reader.Read()) // перебираем результат
    {
        // и сохраняем его в наш словарь
        infa.Add((long)reader[0], (string)reader[1]);
    }
}

Вариант 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<long, string> infa = new Dictionary<long, string>();
</pre>

даст вот такой результат:

// сюда будем складывать полученные данные
Dictionary<long, string> infa = new Dictionary<long, string>();

Обратите внимание, что хотя здесь символы < и > показаны как есть, но на самом деле я там писал &lt; и &gt;, иначе получилось бы вот такое:

// сюда будем складывать полученные данные
Dictionary infa = new Dictionary();

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

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<long, string> infa = new Dictionary<long, string>();
</pre>

даст такой результат:

// сюда будем складывать полученные данные
Dictionary<long, string> infa = new Dictionary<long, string>();

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