Русский
EnglishCodeColorer — плагин, позволяющий вставлять куски кода в заметки, красиво их форматируя. Для начала хочу показать вам пример:
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 имеет несколько приятных свойств:
- нумерация строк
- автоматическая вставка ссылок на документацию
- вычисление размера блока кода (короткий код будет заключен в маленький блок, для более длинного высота блока будет зафиксирована, и появятся полосы прокрутки)
- настройка стиля блока кода в Site Admin (Панель управления)
- настройка подсветки синтаксиса в файле CSS
- подсветка кода в комментариях
- защита кода от искажения Wordpress’ом (например, двойные кавычки, длинные тире и т.п. будут выглядеть в точности так, как Вы их ввели)
Установка
- Загрузите и распакуйте файлы плагина в каталог wp-content/plugins/codecolorer.
- Если вы не использовали CodeColorer раньше, переименуйте wp-content/plugins/codecolorer/codecolorer.css.in в wp-content/plugins/codecolorer/codecolorer.css.
- Включите плагин “CodeColorer” в Site Admin (Панель управления).
- Зайдите на страницу Options/CodeColorer (Настройки/CodeColorer) в Site Admin (Панель управления) и настройте его по своему вкусу.
- Используйте синтаксис [cc lang="lang"]код[/cc] или <code lang="lang">код</code> для вставки блока кода в заметку (вы можете опустить lang="lang", в этом случае код появится в блоке codecolorer, но без подсветки синтаксиса). Список поддерживаемых языков можно найти ниже.
- Наслаждайтесь!
Syntax
Для вставки примера кода в вашу статью (или комментарий) используйте синтаксис [cc lang="lang"]code[/cc] или <code lang="lang">code</cc>. Начиная с версии 0.6.0 вы можете указать дополнительные параметры CodeColorer в теге [cc]: [cc lang="php" tab_size="2" lines="40"]// какой-то код[/cc]
Примечание: Всегда используйте двойные или одинарные кавычки вокруг значений параметров. Булевые значения можно передавать как строку true или false, а также как число 1 или 0.
Возможные праметры:
- lang (строка) — язык примера кода.
- tab_size (число) — сколько пробелов использовать для представления символа табуляции.
- line_numbers (булево) — когда true, будут добавлены номера строк.
- no_links (булево) — когда false, ключевые слова будут представлены в виде ссылок на руководство.
- lines (число) — сколько строк в блоке отображаются без появления скроллбара.
- line_height (число) — высота строки в пикселях для вычисления высоты блока.
Все параметры можно сконфигурировать через страницу настроек CodeColorer.
Поддерживаемые языки
Вот список языков, поддерживаемых CodeColorer: actionscript, ada, apache, applescript, asm, asp, autoit, bash, blitzbasic, bnf, c, caddcl, cadlisp, cfdg, cfm, cpp-qt, cpp, csharp, css-gen.cfg, css, c_mac, d, delphi, diff, div, dos, eiffel, fortran, freebasic, gml, groovy, html, idl, ini, inno, io, java, java5, javascript, latex, lisp, lua, matlab, mirc, mpasm, mysql, nsis, objc, ocaml-brief, ocaml, oobas, oracle8, pascal, perl, php-brief, php, plsql, python, qbasic, rails, reg, robots, ruby, sas, scheme, sdlbasic, smalltalk, smarty, sql, tcl, text, thinbasic, tsql, vb, vbnet, vhdl, visualfoxpro, winbatch, xml, xpp, z80.
Требования
Плагин работает как с Wordpress 1.5, так и с 2.0/2.1. Но я рекомендую обновить Ваш Wordpress до версии 2.1, так как он содержит много вкусностей.
Загрузка
Последняя версия “CodeColorer” — 0.6.0, и она может быть загружена отсюда:
версия0.6.0ЗагрузитьCodeColorer Plugin
Если у вас есть предложения, вы хотите оставить отзыв или нашли ошибки, пожалуйста, отпишитесь в комментариях. Это очень важно для меня!
Настройка
Подсветка синтаксиса полностью настраивается: вы можете поменять цветовую схему как для всех языков сразу, так и для отдельного языка. Файл CSS плагина CodeColorer можно найти здесь: wp-content/plugins/codecolorer/codecolorer.css. Чтобы изменить цвета для всех языков, отредактируйте строки в секции Color scheme. Обычно, вам будет достаточно изменить следующие классы CSS:
- kw1, kw2, kw3 — ключевые слова
- co1, co2, coMULTI — комментарии
- es0 — экранированные символы
- br0 — скобки
- st0 — строки
- nu0 — числа
- me0 — методы
Для изменения цветов конкретного языка, скопируйте значения по умолчанию и добавьте имя языка с точкой в начале. Например, в этом блоге я использую следующую цветовую схему для PHP:
.php .codecolorer .kw2 { color: #339999; }
.php .codecolorer .kw3 { color: #FF6600; }
.php .codecolorer .kw4 { color: #DDE93D; }
.php .codecolorer .kw5 { color: #999966; }
.php .codecolorer .st0 { color: #66FF00; }
.php .codecolorer .es0 { color: #42A500; }
.php .codecolorer .br0 { color: Olive; }
.php .codecolorer .nu0 { color: #CCFF33; font-weight: bolder; }
.php .codecolorer .re0 { color: #339999; }
.php .codecolorer .re1 { color: #FFCC00; }
.php .codecolorer .re3 * { color: #FFFFFF; }
.php .codecolorer .re4, .php .codecolorer .re4 * { color: #64A2FF; }
.php .codecolorer .co1, .php .codecolorer .co2, .php .codecolorer .coMULTI { color: #9933CC; }
Кроме того, можно изменить ширину блоков кода в начале файла CSS (вы можете заметить, что в файле прописано несколько значений для различных ситуаций, например для случая, когда ваш код размещается в <blockquote>).
Часто задаваемые вопросы
В. Я включил плагин в Site Admin (Панели управления), но мои примеры кода не подсвечиваются.
О. Вы забыли переименовать codecolorer.css.in в codecolorer.css. Смотрите шаг 2.
В. Я вижу < вместо < (или другие сущности HTML вроде >, &, ") в коде.
О. Вы не должны использовать визуальный редактор при вставке кода в статью.
В. Код подсвечивается на сервере или на клиентском компьютере?
О. CodeColorer раскрашивает код на сервере, вы можете найти HTML подсвеченного кода в исходном коде страницы.
В. Генерируется ли валидный XHTML?
О. Да, результирующий XHTML полностью валидный.
В. Могут ли мои посетители вставлять примеры кода в комментариях?
О. Да, CodeColorer поддерживает подсветку кода в комментариях используя тот же синтаксис, что и в статьях блога.
Список изменений
- v0.6.0 (12 мая 2007)
- Добавлена возможность настраивать размер табуляции.
- Исправлены проблемы неправильного кода XHTML после подсветки синтаксиса.
- Исправлена ошибка, когда пример кода начинается на той же строке, что и текст.
- Теперь можно конфигурировать отдельный блок кода.
- Глобальный рефакторинг кода.
- v0.5.1 (1 апреля 2007)
- Библиотека GeSHi обновлена до версии 1.0.7.19.
- v0.5.0 (31 марта 2007)
- Добавлена возможность отключать ссылки на документацию со страницы настроек CodeColorer.
- Библиотека GeSHi обновлена до версии 1.0.7.18.
- v0.4.0 (26 марта 2007)
- Теперь можно вставлять блоки кода в комментариях.
- Добавлена возможность использовать одинарные кавычки ([cc lang='php'][/cc]).
- v0.3.0 (11 декабря 2006)
- Исправлена ошибка с искажением двойных кавычек.
- Исправлена проблема с подсчетом высоты блока кода и полосами прокрутки.
- v0.2.0 (6 ноября 2006)
- Реализована страница настроек CodeColorer.
- v0.1.0 (1 ноября 2006)
- Базовая функциональность плагина: подсветка синтаксиса, опции в файле плагина.
Другие плагины
Полный список плагинов, которые я написал, можно найти здесь.
Есть ещё и отечественный http://softwaremaniacs.org/soft/highlight/
Ага, но он принципиально отличается тем, что реализован на JavaScript и раскрашивает синтаксис на клиенте. Хотя признаю, решение красивое
Несколько неудобным показалось то, что само “окошко” фиксированной высоты. я о тех случаях когда надо написать буквально пару строчек кода.
Можно было бы реализовать через min-height(expression для ИЕ) + overflow:hidden…немного гармонии так сказать
Хм… для пары строчек высота блока не фиксируется. Вот пример:
echo $a . ' world';
Фиксируется только для блоков кода, высота которых больше заданной в настройках.
Упс,прошу прощения. Зачит, трабл с плагином где-то у меня.
[...] Já no meu primeiro post tive essa dificuldade, tudo bem.. tem a tag <pre> ou até mesmo o CODE do WP, mas fala sério né.. sem nenhuma classe! Então navegando por ae, achei um plugin excelente que se chama CodeColorer. [...]
[...] CodeColorer — Плагин на библиотеке GeSHi (Generic Syntax Highlighter), поддерживающей несметное количество языков (71, если быть точным). Плагин прост в установке и настройке. Вот пример работы этого плагина: [...]
Отличный плагин! Большое спасибо!
Установил. Запостил статью с блоками:
и
Вместо этого текста при просмотре сайта отображается:
::CODECOLORER_BLOCK_1::
::CODECOLORER_BLOCK_2::
В чем дело?
А какая у вас версия плагина и вордпресса? И используете ли вы визуальный редактор?
Стоял Wordpress 2.1.0 Русская версия с сайта maxsite.org
Плагин качал с Вас вчера.
Но уже там появилась 2.2.0 - с ней все ок.
Ну а с 2.1.0. разберитесь.
Да и еще. Для подсветки синтаксиса конфигурационных файлов (apache, mysql, proftpd), чему лучше приравнивать параметр lang ?
Еще замечание:
при вставке кода между тегами
[cc][/cc]
треугольных скобок они некорректно отображается
Mad Chicken: Большое спасибо за отзывы. Отвечу по порядку.
2.1.0 посмотрю, неожиданно как-то в нем сломалось.
Для подсветки кофигурационных файлов Apache язык apache, для конфига MySQL (если не ошибаюсь) подойдет ini, для самих запросов — mysql (либо просто sql, но тогда некоторые специфические для мускула вещи не подсветятся). Вот насчет ProFTPD — не знаю, возможно apache подсветит и его, уж больно похожи.
Насчет угловых скобок — это второй вопрос в секции ЧаВО чуть выше на странице. Съедает их вордпресс во время постинга в визуальном редакторе. Советую на время вставки примеров кода переключаться в редактор HTML (или вообще не использовать визуальный редактор ибо он от лукавого, постоянно лепит непонятные теги, причем не к месту).
Еще раз спасибо.
Мне кажется что проблему с угловыми скобками можно решить в самом плагине, например производить замену < на нужный символ. К тому же угловые скобки часто встречаются в конфигурационных файлах апача, Mysql итд. Ведь даже если в 1й раз переключишся в режим редактирования кода html, то при следующем редактировании статьи - оптять косяки вылезут.
Имхо можно решить проблему.
Я над этим работаю. Просто до этого времени основной задачей было исправить проблемы с XHTML и проблемами в комментариях. Сейчас образовалось немного времени на исправление этой багофичи вордпресса.
Подскажите, пожалуйста, как выделить код прямо в строке, без переноса, так, как у вас сделано на сером фоне с пунктиром?
У меня это сделано без CodeColorer, просто тег <tt>code</tt>, и в стилях поставил фон этому тегу. А за мысль спасибо, надо добавить в CodeColorer.
Ясненько.
Спасибо за этот плагин! Очень удобная штука.
Дмитрий, еще такой вопрос.
Если код состоит всего из одной строки и он меньше ширины страницы, т.е. не появляется горизонтальный скролл, то под этой строкой появляется отступ, который “забронирован” для скролла.
Не очень красиво это выглядит. Можно как-то исправить?
I’m also getting ::CODECOLORER_BLOCK_1::. Using Wordpress 2.1 without the visual editor. Could you translate your response to Mad Chicken? Thanks!
[...] CodeColorer color your programming posts [...]
I am having a few problems with CodeColorer. First off, it seems that no matter what or where I set the tab_length to it equals 4. Also, if I post some code, and then go to edit it later, all of the tabs disappear. Is there any way that the CodeColorer could automatically insert tabs where it makes sense?
[...] CodeColorer [...]
[...] Visit [...]
Hi, I have a little (but horrible) problem with this plugin in my theme.
I use Freshy theme (http://www.jide.fr/) and line numbers appears in wrong mode. Like this:
1
First line of code
2
Second line of code
….
How can I correct this?
Thanks
echo $awesome . "rocks!!";
[...] Plugin - CodeColorer http://kpumuk.info/projects/wordpress-plugins/codecolorer [...]
[...] Отказался от плагина colorer в пользу Highlight. Оба плагина занимаются подсветкой [...]
Here my test :
stage.align = StageAlign.TOP_LEFT;
var myLoader:Loader = new Loader();
addChild(myLoader);
myLoader.load(new URLRequest('zoom_4-5.jpg'));
myLoader.contentLoaderInfo.addEventListener(Event.INIT, initListener);
function initListener(e:Event):void {
Bitmap(myLoader.content).smoothing = true;
stage.addEventListener(Event.RESIZE, resizeListener);
}
function resizeListener(e:Event):void {
var scale_x = stage.stageWidth/1219;
var scale_y = stage.stageHeight/609;
var scale_global:Number;
if(scale_x > scale_y) {
scale_global = scale_y;
}
else {
scale_global = scale_x;
}
myLoader.scaleX = scale_global;
myLoader.scaleY = scale_global;
}
[...] Я использую Сагалаевский highlight.js. Есть еще CodeColorer от kpumuk’а и, думаю, еще куча разных плагинов в этой [...]
[...] I am posting this script at such an early stage because I wanted to test a Highlight Syntax plug-in for wordpress. Thanks to CodeColorer (http://kpumuk.info/projects/wordpress-plugins/codecolorer). [...]
Спасибо, очень удобный плагин, а то <code> как-то не очень удобен для вставки кода.
P.S. OpenID(Oher OpenID) не работает - ругается на curl_init, проверь…
Exist a client side (javascript) version of this plugin???
[...] sahip kod renklendirici arayan arkadaşlar buyrun karşınızda CodeColorer. Bu yazının orjinaline buradan ulaşabilirsiniz. Ben sadece yazıyı dilim döndüğünce affınıza sığınarak çevirmiş [...]
Спасибо огромное за плагин!
Всё отлично, но поддержу Mad Chicken в его просьбе решить проблему с угловыми скобками. Посчу много шел скриптов - а там угловые скобки чуть не в каждой строчке. Переправлять каждый раз когда вносишь изменение в пост утомляет.
Ещё раз спасибо за плагин! )
Thanks for this one! Installed… works like charm.
Спасибо за хороший плагин. Но у меня с ним тоже возникла проблема. При написании сообщения всё нормально сохраняется и выглядит в блоге. Но когда я решаю отредактировать написанный пост - то вместо нормального кода в редакторе вордпресса я вижу уже не то, что надо (например, если у меня был в коде тэг , то в редакторе его нет, просто переход на новую строку). И при повторном сохранении код уже портится. Что делать?
Тэг “br” я имел в виду, вордпресс и тут вырезал его из коммента.
[...] sahip kod renklendirici arayan arkadaşlar buyrun karşınızda CodeColorer. Bu yazının orjinaline buradan ulaşabilirsiniz. Ben sadece yazıyı dilim döndüğünce affınıza sığınarak çevirmiş [...]
[...] codecolorer благин с более обширным спектором возможностей: нумерация строк автоматическая вставка ссылок на документацию вычисление размера блока кода (короткий код будет заключен в маленький блок, для более длинного высота блока будет зафиксирована, и появятся полосы прокрутки) настройка стиля блока кода в Site Admin (Панель управления) настройка подсветки синтаксиса в файле CSS подсветка кода в комментариях защита кода от искажения Wordpress’ом (например, двойные кавычки, длинные тире и т.п. будут выглядеть в точности так, как Вы их ввели) [...]
[...] beberapa macam syntax hiliter yang saya cari di WordPress Plugins saya tertarik dengan codecolorer, karena sangat simpel dan mudah digunakan. Awalnya saya agak jengkel dengan plugin ini. Sebab kode [...]
[...] I have had poor results with Flash Text Formatter I no longer use it. Rather I suggest CodeColorer. Flash Text Formatter suffers from a lack of maintenance and good web site [...]
Hi, I’ve been tested this script and it show me an line with error when I activated on Plugin’s Area (WordPress 2.3.3).
Error:
Is it normal?
Hi Raphael,
Looks like you have enabled another syntax highlighting plugin that uses GeSHi framework too. You must disable it before using CodeColorer.
Hum, I will see.
Thanks!
после активации плагина вкладка “плагины” админки wordpress не открывается, сносишь плагин по FTP все сразу нормально. Странный баг какой-то
[...] CodeColorer [...]
у меня почему то при активации плагина выскакивает ошибка в коде с блогом
GeSHi Error: GeSHi could not find the language lang (using path /home/domain/domains/my_domain.com/public_html/wp-content/plugins/codecolorer/lib/geshi/)
[...] плагином под названием CodeColorer вы можете ознакомится тут. Очень даже удобный. Его плюс, имхо, в том что он [...]
[...] 其實可以搭配另一個外掛，那就是 CodeColorer，這個外掛，可以讓你在寫程式的時候加上顏色喔，相當方便，他支援的語法如下： actionscript, ada, apache, applescript, asm, asp, autoit, bash, blitzbasic, bnf, c, caddcl, cadlisp, cfdg, cfm, cpp-qt, cpp, csharp, css-gen.cfg, css, c_mac, d, delphi, diff, div, dos, eiffel, fortran, freebasic, gml, groovy, html, idl, ini, inno, io, java, java5, javascript, latex, lisp, lua, matlab, mirc, mpasm, mysql, nsis, objc, ocaml-brief, ocaml, oobas, oracle8, pascal, perl, php-brief, php, plsql, python, qbasic, rails, reg, robots, ruby, sas, scheme, sdlbasic, smalltalk, smarty, sql, tcl, text, thinbasic, tsql, vb, vbnet, vhdl, visualfoxpro, winbatch, xml, xpp, z80 [...]
Большое спасибо, это действительно то что я искал, очень удобно и без лишнего гемора, особенно когда публикуешь фрагменты кода
I have to say ‘Thank you’ first, I loooooooove this plugin!!!!
One small thing, I notice the code will remove the first spaces from the code because of ‘trim’, I use the following code instead and it fixed the problem.
p.s. it works fine with wp2.5.1
$text = rtrim($text);
#line 215 $text = trim($text);
Yep, you can use
I think I found a small bug
in comment if wrote several \ and a ‘ in the cc or code block, that comment won’t be posted!
if in post wrote several \ and a ‘ the result will be missing one \
I make a small change
$text = str_replace(”\\\”", “\”", $text);
# $text = str_replace(array(”\\\”", ‘\\\”), array (”\”", ‘\”), $text);
[...] Спасибо Dimox‘у за линк на клевый плагин для подсветки и форматирования кода в вордпрессе. [...]
[...] один плагин WordPress для подсветки синтаксиса — CodeColorer. Как и многие другие плагины (напрмер, WP CodeBox Эрика [...]
[...] jolies couleurs plus haut, c’est CodeColorer. Neat [...]
[...] que nada estaba utilizando el plugin de codecolorer hay que buscar el archivo codecolorer.php y modificar algunas [...]
[...] | Author: Dmytro Shteflyuk Coloring: #8 of 8 Ease of Install/Use: #8 of 8 Line Numbers: Optional PRE or CODE: CODE or [...]
[...] CodeColorer обладает также рядом дополнительных интересных свойств, например, нумерацией строк, настройкой подсветки синтаксиса, подсветкой кода в комментариях и т.п. Модуль имеет достаточно широкий спектр настроек и большой список поддерживаемых языков. Единственное, что заставляет задуматься, это требования к версии wordpress - 2.1. Поэтому гарантии безотказной работы в более старших версиях нет. Подробнее о плагине на русском языке можете почитать в этом обзоре. [...]
I think I found 2 bugs.
1. If code snippets has only one line, his height is to small to display code.
2. If there are some tabs in code I must to use parameter ‘tab_size’. Is there no default value?
Upsss. Here one line snippet looks properly. Why?
[...] 5) CodeColorer [...]
[...] CodeColorer обладает также рядом дополнительных интересных свойств, например, нумерацией строк, настройкой подсветки синтаксиса, подсветкой кода в комментариях и т.п. Модуль имеет достаточно широкий спектр настроек и большой список поддерживаемых языков. Единственное, что заставляет задуматься, это требования к версии wordpress - 2.1. Поэтому гарантии безотказной работы в более старших версиях нет. Подробнее о плагине на русском языке можете почитать в этом обзоре. [...]
[...] Для подсветки синтаксиса установил плагин для WordPress - CodeColorer. Плагин поддерживает кучу языков: actionscript, ada, apache, [...]
[...] мы пользовались плагином CodeColorer : отличный плагин на основе GeSHi для подсветки исходных [...]
[...] opierając się na opisach i ocenach postanowiłam wypróbować wtyczkę CodeColorer którą stworzył Dmytro Shteflyuk. Oczywiście nie twierdzę, że jest ona najlepsza, ale z [...]
[...] 2. CodeColorer Plugin works with Wordpress 1.5 and 2.0/2.1 as well. Recommended to update your Wordpress to version 2.1 because it has many nice features. http://kpumuk.info/projects/wordpress-plugins/codecolorer/ [...]