Dmytro Shteflyuk's Home Dmytro Shteflyuk's Home

thoughts about programming

CodeColorer

Posted by Dmytro Shteflyuk on · English (95,365 views)

CodeColorer – плагин, позволяющий вставлять куски кода в заметки, красиво их форматируя. Для начала хочу показать вам пример:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Feed < ActiveRecord::Base

  SourceTypes = {
    :category => 0,
    :tag => 1
  }
 
  define_enum :source_type, :raise_on_invalid => true

  #-------------------------------------------------
  # Accessors

  def video_ids
    v = self[:video_ids]
    v ? v.split(':').map(&:to_i) : []
  end
end

Плагин основан на библиотеке GeSHi, поддерживающей огромное количество языков. CodeColorer имеет множество приятных свойств:

  • подсветка синтаксиса в лентах RSS
  • подсветка синтаксиса строчного кода (inline)
  • подсветка кода в комментариях
  • автоматическая нумерация строк
  • автоматическая вставка ссылок на документацию
  • грамотное вычисление размера блока кода (короткий код будет заключен в маленький блок, для более длинного высота блока будет зафиксирована, и появятся полосы прокрутки)
  • Предустановленные цветовые схемы (Slush & Poppies, Blackboard, Dawn, Mac Classic, Twitlight, Vibrant Ink)
  • настройка подсветки синтаксиса в файле CSS
  • защита кода от искажения WordPress’ом (например, двойные кавычки, длинные тире и т.п. будут выглядеть в точности так, как Вы их ввели)

Установка

  1. Загрузите и распакуйте файлы плагина в каталог wp-content/plugins/codecolorer.

  2. Включите плагин CodeColorer в Site Admin (Панель управления).

  3. Зайдите на страницу Options/CodeColorer (Настройки/CodeColorer) в Site Admin (Панель управления) и настройте его по своему вкусу.

  4. Используйте синтаксис [cc lang="lang"]код[/cc] или <code lang="lang">code</code> для вставки блока кода в заметку (вы можете опустить lang="lang", в этом случае код появится в блоке codecolorer, но без подсветки синтаксиса). Кроме того, можно использовать [cci lang="lang"]code[/cci] для форматирования строчных блоков кода (см. описание опции “inline”). Список поддерживаемых языков можно найти ниже.

  5. Наслаждайтесь!

Синтаксис

Для вставки примера кода в вашу статью (или комментарий) используйте синтаксис [cc lang="lang"]code[/cc] или <code lang="lang">code</code>. Начиная с версии 0.6.0 вы можете указать дополнительные параметры CodeColorer в теге [cc]:

1
[cc lang="php" tab_size="2" lines="40"]// какой-то код[/cc]
Примечание: Всегда используйте двойные или одинарные кавычки вокруг значений параметров. Булевые значения можно передавать как строку true или false, on или off, а также как число 1 или 0.

Короткие коды

Начиная с версии 0.8.6 CodeColorer позволяет использовать короткие коды для вставки блоков кода. В общем случае, короткий тег выглядит так: [ccMODE_LANG], где LANG — это ваш язык програмиирования, а MODE — один или несколько следующих режимов:

  • i – inline
  • e – escaped
  • s – strict
  • n – line_numbers
  • b – no_border
  • w – no_wrap
  • l – no_links

Маленькие буквы означают включено, большие – выключено. Примеры:

Код PHP с включенными ссылками и выключенными номерами строк:

1
2
3
[cclN_php]
echo "hello"
[/cclN_php]

Экранированный код HTML:

1
[ccie_html]<html>[/ccie_html]

Код на Ruby с переносом строк и размером табуляции 4:

1
2
3
[ccW_ruby tab_size="4"]
attr_accessor :title
[/ccW_ruby]

Другие примеры можно найти на странице примеров использования CodeColorer. Полный список параметров представлен ниже.

Возможные праметры

  • lang (строка) – язык примера кода.
  • tab_size (число) – сколько пробелов использовать для представления символа табуляции.
  • line_numbers (булево) – когда true, будут добавлены номера строк.
  • first_line (число) – номер первой строки в блоке.
  • highlight (строка) – номера строк для выделения, разделенные запятой (например, 1,5,8,9).
  • no_links (булево) – когда false, ключевые слова будут представлены в виде ссылок на руководство.
  • lines (число) – сколько строк в блоке отображаются без появления скроллбара; может равняться -1 – в этом случае вертикальной полосы прокрутки не будет вообще.
  • width (число или строка) – ширина блока кода.
  • height (число или строка) – высота блока кода в пикселях; используется, если код содержит больше, чем lines строк.
  • rss_width (число или строка) – ширина блока кода в RSS лентах.
  • theme (строка) – цветовая схема (default, blackboard, dawn, mac-classic, twitlight, vibrant).
  • inline ( булево ) – когда true, блок кода будет отображен в теге <code>. Используется для вставки однострочных кусков кода в обычный текст.
  • strict ( булево ) – когда true, будет включен “строгий” режим подсветки. По умолчанию CodeColorer пытается угадать, использовать этот режим или нет, а опция позволяет принудительно включить или выключить его, если предположение было сделано неверно.
  • nowrap (булево) – когда false, горизонтальная полоса прокрутки не будут отображаться. Вместо этого строка кода будет разбита на две на границе блока.
  • noborder (булево) – когда true, рамка вокруг блока кода не будет отображаться.
  • no_cc (булево) – когда true, синтаксис в блоке не будет подсвечиваться, код будет выведен внутри тега <code></code>.
  • class (строка) – дополнительные классы CSS для обрамляющего блок элемента HTML.

Вы можете использовать специальный тег [cci] вместо [cc], чтобы заставить код отображаться в строчном блоке: [cci lang="lang"]code[/cci]

Большую часть параметров можно сконфигурировать через страницу настроек CodeColorer.

Поддерживаемые языки

Вот список языков, поддерживаемых CodeColorer: abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cfdg, cfm, cil, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran, freebasic, genero, gettext, glsl, gml, gnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, perl, php-brief, php, pic16, pixelbender, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, yaml, z80.

Требования

Плагин работает с WordPress 2.7.0 — 2.8.2. Эй, пользоваели WordPress 2.7.0, можете объяснить, почему вы используете эту старое глючное поделие? Используйте новое, как минимум оно выглядит лучше!

Загрузка

Последняя версия “CodeColorer” — 0.9.8, и она может быть загружена отсюда:

version0.9.8DownloadCodeColorer Plugin

Вы можете скачать более старые версии плагина с его домашней страницы на сайте WordPress.org (но действительно ли вам нужно это старье?).

Перевод

Спасибо вам, ребята, за перевод CodeColorer на другие языки. На данный момент доступны следующие локализации CodeColorer:

Хотите помочь мне с переводом? Это просто!

  1. Установите Poedit.

  2. Скачайте codecolorer.pot file.

  3. Нажмите File/New catalog from .pot file и выберете файл codecolorer.pop, который вы только что загрузили.

  4. Введите название проекта (что-то вроде CodeColorer 0.9.8), ваше имя и адрес email, выберите язык, на который хотите перевести, и нажмите OK.

  5. Введите имя файла вроде codecolorer-en_EN.po и нажмите Save.

  6. Переведите все строки одну за другой.

  7. Отправьте мне файл .po с переводом на адрес kpumuk@kpumuk.info. Не забудьте ссылку, которая будет добавлена на домашнюю страницу CodeColorer.

  8. Спасибо!

Чтобы исправить существующий перевод, просто откройте соответствующий файл .po из каталога codecolorer/languages в Poedit, и добавьте пропущенные или обновите существующие строки.

Настройка

Подсветка синтаксиса полностью настраивается: вы можете поменять цветовую схему как для всех языков сразу, так и для отдельного языка. Файл CSS плагина CodeColorer можно найти здесь: wp-content/plugins/codecolorer/codecolorer.css. Чтобы изменить цвета для всех языков, отредактируйте строки в секции Color scheme.

Существует простое отображение между классами тем для Textmate и CodeColorer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    /* "Slush & Poppies" color scheme (default) */
    .codecolorer-container, .codecolorer { color: #000000; background-color: #F1F1F1; }
    /* Comment */
    .codecolorer .co0, .codecolorer .co1, .codecolorer .co2, .codecolorer .co3, .codecolorer .co4, .codecolorer .coMULTI { color: #406040; font-style: italic; }
    /* Constant */
    .codecolorer .nu0, .codecolorer .re3 { color: #0080A0; }
    /* String */
    .codecolorer .st0, .codecolorer .st_h, .codecolorer .es0, .codecolorer .es1 { color: #C03030; }
    /* Entity */
    .codecolorer .me1, .codecolorer .me2 { color: #0080FF; }
    /* Keyword */
    .codecolorer .kw1, .codecolorer .kw2, .codecolorer .sy1 { color: #2060A0; }
    /* Storage */
    .codecolorer .kw3, .codecolorer .kw4, .codecolorer .kw5, .codecolorer .re2 { color: #008080; }
    /* Variable */
    .codecolorer .re0, .codecolorer .re1 { color: #A08000; }
    /* Global color */
    .codecolorer .br0, .codecolorer .sy0 { color: #000000; }

Загляните в файл codecolorer.css, чтобы найти больше примеров.

Часто задаваемые вопросы

В. Как мне задать свои стили CSS для кода?
О. Вы можете изменить стили CSS на странице Options/CodeColorer (Настройки/CodeColorer) в Site Admin (Панель управления).

В. Я вижу &lt; вместо < (или другие сущности HTML вроде >, &, ") в коде.
О. Вы должны использовать [cc escaped="true"] или [cce] в визуальном редакторе для вставки кода в пост.

В. Код подсвечивается на сервере или на клиентском компьютере?
О. CodeColorer раскрашивает код на сервере, вы можете найти HTML подсвеченного кода в исходном коде страницы.

В. Генерируется ли валидный XHTML?
О. Да, результирующий XHTML полностью валидный.

В. Могут ли мои посетители вставлять примеры кода в комментариях?
О. Да, CodeColorer поддерживает подсветку кода в комментариях используя тот же синтаксис, что и в статьях блога.

В. Как я могу отключить подсветку синтаксиса для определенных блоков <code>?
О. Используйте опцию no_cc="true" для нужных блоков.

В. Я обновил плагин до последней версии и теперь постоянно получаю предупреждения:

1
Warning: array_keys() [function.array-keys]: The first argument should be an array in /home/wordpress/wp-content/plugins/codecolorer/lib/geshi.php on line 3599

О. Удалите все файлы из каталога codecolorer и распакуйте архив с плагином заново (спасибо Anatoliy ‘TLK’ Kolesnick).

В. Мне нравится этот плагин. Как я могу выразить признательность автору?
О. Просто проголосуйте за этот плагин на сайте WordPress.org. И спасибо вам!

Поддержка

Если у вас есть предложения, вы нашли ошибку, есть желание перевести CodeColorer на ваш язык, или просто хотите сказать “спасибо”,– не стесняйтесь связаться со мной. Обещаю, я отвечу на каждое сообщение.

Если вы хотите помочь в разработке, смотрите раздел Разработка ниже.

Разработка

Исходный код этого плагина доступен как в SVN, так и в Git:

Не бойтесь вносить изменения в код и присылать мне патчи. Обещаю, я применю каждый (естественно, если они полезны продукту). Отправляйте патчи, пожелания и информацию об ошибках: kpumuk@kpumuk.info. Кроме того, есть множество других способов связаться со мной.

Список изменений

  • 0.9.8 (23 марта 2010)
    • Добавлена иконка на страницу опций в панели администрирования.
    • Обновлен перевод на арабский (спасибо Amine Roukh).
    • Библиотека GeSHi обновлена до 1.0.8.6.
    • Добавлена возможность подсвечивать заданные строки (спасибо DELTA NOVA).
    • Добавлен перевод на чешский (спасибо Lelkoun).
    • Добавлен перевод на грузинский (спасибо Nika Chkhikvishvili).
    • Добавлен перевод на персидский (спасибо Hamed Momeni).
    • Добавлено несколько юнит-тестов (удивлены?).
  • 0.9.7 (19 декабря 2009)
    • Исправлена ошибка с атрибутом theme="geshi".
    • Добавлена возможность подсвечивать любой кусок кода из PHP.
    • Используется wp_enqueue_style вместо генерации простого HTML.
    • Исправлена ошибка с экранированными кусками кода, кода некоторые сущности не декодировались.
    • Добавлена совместимость с WordPress 2.9.
  • 0.9.6 (18 декабря 2009)
    • Добавлен перевод на французский (спасибо Valentin PRUGNAUD, fanta78, Sylvain Zabé и Whiler).
    • Добавлен перевод на бразильский португальский (спасибо Paulo César M. Jeveaux, Fabricio Bortoluzzi и Rodolfo Leão).
    • Добавлен перевод на шведский (спасибо LHLI).
    • Исправлены проблемы с валидацией XHTML на странице настроек CodeColorer (спасибо Brett Zamir).
    • Добавлен перевод на японский (спасибо Kuroneko Square).
    • Добавлен перевод на датский (спасибо Hans Klysner).
    • Добавлена тема GeSHi.
    • Добавлена возможность указывать дополнительные классы CSS для обрамляющего блок элемента HTML.
  • 0.9.5 (27 августа 2009)
    • Добавлен перевод на голландский (спасибо Martijn van Iersel).
    • Добавлен перевод на испанский (Аргентина) (спасибо Diego Sucaria).
    • Добавлен перевод на арабский (спасибо Amine Roukh).
    • Исправлена ошибка в сафари, возникающая когда у родительского тега выставлен CSS стиль text-align=justify.

Полную историю изменений можно найти на странице История CodeColorer.

Другие плагины

Полный список плагинов, которые я написал, можно найти здесь.

199 Responses to this entry

Subscribe to comments with RSS or TrackBack to 'CodeColorer'.

Sébastien Labonne @
said on Ноябрь 17, 2009 at 22:06 · Permalink · Ответить

Thanks for the wonderful add-in.

I’m having a little problem. When I’m checkin the post page, the add-in works fine. However, I’m having problems on my main page where the cc blocks appear instead.

Also, I tried us the VB language and the comment don’t seem to be recognized.

Sébastien

Tsalagi @
said on Декабрь 24, 2009 at 05:10 · Permalink · Ответить

Is this plugin supported on this website. If so I need some solutions to two issues.
1. When I use <code> it removes my text from my page.
2. When I set a theme I still get no colors on the code on my page.

Thanks in advance.

Tsalagi
said on Декабрь 24, 2009 at 05:12 · Permalink · Ответить

Try again.
1. When I use no_cc="true" my text is removed from my page.

Deimos
said on Декабрь 24, 2009 at 15:23 · Permalink · Ответить

Добрый день, подскажите как то можно сделать чтобы когда человек вводит
{code lang=”"}тут текст{code} (специально заменил)
не вылазила ошибка, вот такая:

1
<code>тут текст<code>

У меня стоит последняя 0.9.7 версия, версия WordPress 2.7.1

Deimos
said on Декабрь 24, 2009 at 15:25 · Permalink · Ответить

странно у вас не появилась ошибка, у меня пишет:

1
GeSHi Error: GeSHi could not find the language (using path /wp-content/plugins/codecolorer/lib/geshi/) (code 2)
Douglas
said on Декабрь 29, 2009 at 05:57 · Permalink · Ответить

Hi. There is a problem in your code that appear when yout set an image as background. To verify that creates a “stripe” image (www.stripegenerator.com) and add it as background (in codecolorer.css ) and you will see a continuity break (set the width as 100% in the plugin options). I searched in the code and I saw that the cause is the way that you show the line numbers. You calculate the numbers manually and create a table to show them. So there is a conflict between the end of the table and the rest of the container that you create to apply the user options. I solved in two ways. The simplest is to put a width=”100%” in your second , so the table will fill all the container space.
The second is to use the Geshi methods to show the lines:

1
2
$geshi->start_line_numbers_at($options['first_line']);
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS);

deleting the creation of the table.

thanks.

Dmytro Shteflyuk
said on Декабрь 29, 2009 at 12:34 · Permalink · Ответить

I don’t like Geshi line numbers because when you copy code, browser copies them too. It’s really weird thing, so I ended up with this table implementation. Your point about 100% makes sense, I’ll take a look how it will impact code blocks layout.

Hikari
said on Январь 8, 2010 at 06:58 · Permalink · Ответить

Hello Dmytro!

I’ve found a bug in CodeColorer. If I try to set its width to 100%, it goes beyond its container (post or comment wrapper), making the page goes beyond browser’s width and creating an horizontal scroll on it.

To fix it, I’ve added the following styles:

1
2
3
4
5
6
7
8
.codecolorer-container{
    position: relative;
    width: 98%;
}
.codecolorer-container .codecolorer{
    position: absolute;
    top:0;
}

Setting .codecolorer‘s position to absolute “locks” it inside the first HTML element whose position is not static (because its position is based on that element), so setting .codecolorer-container to relative, makes it the element to where .codecolorer will be based.

Just to leave it documented, position allows us to change an element’s original position and area. position: relative; allows us to change it based on its original position. Since no top and left properties are set, they remain on their original position, but .codecolorer now can’t go beyond .codecolorer-container.

IDK if this is the proper way to fix it, but worked for me. Note also that I added width: 98%; to define its width, because the whole idea of using these styles is so that I can use % width.

Using style attibute is not good, a better idea would be use PHP to supply a CSS generated dynamically, it is much more powerful :D

Another tip: I needed to use code highlight in my theme, outside of shortcode filters. To do so, I used GetCodeHighlighted:

1
2
3
4
5
6
if(class_exists('CodeColorer')){
    $codeColorer = &CodeColorer::GetInstance();

    echo $codeColorer->GetCodeHighlighted($string);
   
}

$string is a normal string we use in posts and comments, it can have normal text with HTML and they won’t be highlighted, and we just use normal [ cc][ /cc] <code></code> and anything inside them will be highlighted!

Ah and of course, CodeColorer and WP-CodeBox work together nicely, they don’t share the same tags :D

Dmytro Shteflyuk
said on Март 23, 2010 at 16:56 · Permalink · Ответить

First of all, thanks for your suggestion about positioning. I will test in on different environments and then decide what to do.

About highlighting of an arbitrary piece of code: you can use codecolorer_highlight global function. It is defined in codecolorer.php and used just to do that (starting from version 0.9.7).

Quantum @
said on Январь 28, 2010 at 00:23 · Permalink · Ответить

I have made a modification to the plugin that uses Geshi to background highlight particular lines of already highlighted code. It’s a way of outlining specific lines of some code for tutorial use. The modification is described here.http://www.deltanova.co.uk/641/

Quantum @
said on Апрель 5, 2010 at 21:32 · Permalink · Ответить

Following the integration of my previous modification into 0.9.8 I was asked by a user to enhance the highlight function to accept number ranges in addition to individual line numbers. The modification can be found here http://www.deltanova.co.uk/670/

More comments: 1 ... 5 6 7

Post a comment

You can use simple HTML-formatting tags (like <a>, <strong>, <em>, <ul>, <blockquote>, and other). To format your code sample use [cc lang="php"]$a = "hello";[/cc] (allowed languages are ruby, php, yaml, html, csharp, javascript). Also you can use [cc][/cc] block and its syntax would not be highlighted.

Отправить комментарий