среда, 13 марта 2013 г.

Красота спасет мир

reStructuredText

Уважаемый @rcassum в свойственной питонистам манере делать геморрой на ровном месте все автоматизировать решил не пользоваться красивым UI и создавать свой написальщик файлов. Поскольку на работе я успешно использую для написания Reference Guide язык разметки reStructuredText, то тоже решил немного поиграться с автоматизацией.

Утилита для превращения RST в HTML нашлась легко: в бездонных репозитория openSUSE существует пакет python-docutils, который содержит утилиты для превращения RST во все основные текстовые форматы. Кроме консольной утилиты нашелся и графический редактор ReText. Но у обоих утилит обнаружился большой недостаток: по сути отсутствует подсветка синтаксиса. Специально для таких эстетов нашлась библиотека Pygments, которая предоставляется пакетом python-Pygments. Повозившись немного с питоном в попытках сотворить собственный скрипт, который связал бы все вместе, махнул рукой и взял рабочий проект на базе Sphinx.



  

Но правильно сгенерированного HTML мало, еще нужно добавить стили для красивой подсветки. Для этого в настройках шаблона Blogger идем Шаблон - Настроить - Дополнительно - Добавить CSS и вставляем нужные стили. Намного удобнее было бы вставить ссылку на внешний файл стилей, но понимать link движок категорически отказался.

Итак, чего мы добились. Вместо грустного и скучного:

flag ? function(){

var ar = self.selectionArray;

ar.all = false;

query(“input”, self.containerNode)[0].checked = false;

if(this.checked)

ar.push(this.value);

else

try { ar.splice(arr.indexOf(ar, this.value), 1); } catch(e){}

} : function(){

var ar = self.selectionArray;

ar.splice(0, ar.length, this.value);

}

можно написать вот так:

flag ? function(){
   var ar = self.selectionArray;
       ar.all = false;
       query("input", self.containerNode)[0].checked = false;
   if(this.checked)
           ar.push(this.value);
       else
           try { ar.splice(arr.indexOf(ar, this.value), 1); } catch(e){}
   } : function(){
           var ar = self.selectionArray;
       ar.splice(0, ar.length, this.value);
}

highlight.js

Ну и да, я не я был бы, если бы не оставил себе возможность немного похалтурить. Если не хочется писать на RST, то зачем заставлять себя? Но красивую подсветку кода все-равно хочется. Нас спасет highlight.js. Снова идем в настройки шаблона: “изменить HTML” и подключаем библиотеку в теге <head>:

<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

После этого с помощью демо-страницы выбираем понравившуюся тему (http://softwaremaniacs.org/media/soft/highlight/test.html) и копируем ее к стилям блога как было рассказано выше (подключить ее в шаблон как внешний файл движок не дал - валится с ошибкой xml).

Теперь при написании статьи обычным текстом нам достаточно перед публикацией перейти к отображению в виде HTML-кода и обернуть все фрагменты кода тегами <pre><code>, а тип используемого языка программирования скрипт определит самостоятельно.

Разумеется вариант c highlight.js абсолютно самостоятлен и может использоватся когда RST не нужен.

Бонус

Решил немного банально постебать питонистов для чего потребовался зачеркнутый текст. Эксперимент с интуитивноожидаемыми двумя дефисами провалился. Поиск в документации показал, что в reStructuredText нет способа описать зачеркнутый текст. Пришлось самостоятельно немного расширить синтаксис:

.. role:: strike
        :class: strike

в CSS добавляем

.strike {
        text-decoration: line-through;
}

В самом тексте теперь нужно писать вот так: ”:strike:`делать геморрой на ровном месте`”