17 апр. 2009 г.

Blogger. Подсветка синтаксиса - не совсем бесполезная идея.

Ну вот и снова пятница, а рассказать и нечего, хотя... Расскажу ка я о такой полезной вещи для блога, как подсветка синтаксиса. Все айтишники наверняка сталкивались с такой проблеммой как ненаглядность опубликованного програмного кода. Хочется немного разукрасить кодяру :). Есть много различных способов это сделать, но я остановился на двух, по моему мнению найболее удобных.

Первый - с помощью javascript-а, мне понравился проект от Google под скромным названием google-code-prettify. Для активации необходимо добавить в хеадеры строки
<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'/> 
Далее необходимо в тег body добавить onload='prettyPrint()'.На примере blogger.com для этого нужно подправить шаблон страницы Layout->Edit HTML. В итоге получаем все, что заключено в теги code или pre с выставленным аттрибутом class='prettyprint' будет отформатировано в соответствие с синтаксисом какого либо языка. По умолчанию, язык определяется автоматически, для того, чтобы задать конкретный язык необходимо выставить атрибут class='prettyprint-lang', где вместо lang язык из списка (bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh, xhtml, xml, xsl)

Второй способ - с помощью сайтов постеров кода, как пример - quick highlighter. Все что нужно - запостить свой код и получить готовый отформарматированный html-код. На выше упомянутом сайте есть два способа генерации html-кода - отдельно css и html (css нужно преварительно поместить в хеадеры) и все вместе(все в html-коде). На примере blogger.com для добавления css в хеадеры нужно опять же подправить шаблон страницы, для этого Layout->Edit HTML.

Комментариев нет: