CodeColorer

Posted by Dmytro Shteflyuk on

CodeColorer is the plugin which allows you to insert code snippets into the post with nice syntax highlighting. I want to show you example first:

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

Plugin based on GeSHi library, which supports most languages. CodeColorer has various nice features:

  • syntax highlighting in RSS feeds
  • syntax highlighting of single line of code (inline)
  • syntax highlighting of code in comments
  • line numbers
  • automatic links to the documentation inserting
  • code block intelligent scroll detection (short code would have short block, for long one block height would be fixed and scrollbar would appear)
  • predefined color themes (Slush & Poppies, Blackboard, Dawn, Mac Classic, Twitlight, Vibrant Ink)
  • syntax colors customization in CSS file
  • code protect from mangling by WordPress (for example, quotes, double-dashes, etc would look just right as you entered)

Installation

  1. Download and unpack plugin files to wp-content/plugins/codecolorer directory.

  2. Enable CodeColorer plugin on your Plugins page in Site Admin.

  3. Go to the Options/CodeColorer page in Site Admin and change plugin’s options as you wish.

  4. Use [cc lang="lang"]code[/cc] or <code lang="lang">code</code> syntax to insert code snippet into the post (you could skip lang="lang", in this case code would be in code block, but without syntax highlighting). Also you can use [cci lang="lang"]code[/cci] to format inline code (see the “inline” option description). The list of available languages you could find below.

  5. Have fun!

Syntax

To insert code snippet into your post (or comment) you should use [cc lang="lang"]code[/cc] or <code lang="lang">code</code> syntax. Starting from version 0.6.0 you could specify additional CodeColorer options inside [cc] tag:

1
[cc lang="php" tab_size="2" lines="40"]// some code[/cc]
Note: You should always use double quotes or single quotes around the parameter value. Boolean values could be passed using string true or false, on or off, number 1 or 0.

Short codes

Starting from CodeColorer 0.8.6 you can use short codes to insert code snippets. The short code in common looks like [ccMODE_LANG], where LANG is your programming language, and MODE is the one or more of following modes:

  • iinline
  • eescaped
  • sstrict
  • nline_numbers
  • bno_border
  • wno_wrap
  • lno_links

Small letter means enabled, capital – disabled. Examples:

PHP code with links enabled and line numbers disabled:

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

Already escaped HTML code:

1
[ccie_html]<html>[/ccie_html]

Ruby code without wrapping having tab size equal to 4:

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

More examples could be found on the CodeColorer Examples page. You can find modes explained below.

Possible parameters

  • lang (string) – source language.
  • tab_size (integer) – how many spaces would represent TAB symbol.
  • line_numbers (boolean) – when true line numbers will be added.
  • first_line (integer) – a number of the first line in the block.
  • highlight (string) – a comma-separated list of line numbers to highlight (e.g. 1,5,8,9).
  • no_links (boolean) – when false keywords will be represented as links to manual.
  • lines (integer) – how many lines would be block height without scroll; could be set to -1 to remove vertical scrollbar.
  • width (integer or string) – block width.
  • height (integer or string) – height in pixels; used when lines number is greater then “lines” value.
  • rss_width (integer or string) – block width in RSS feeds.
  • theme (string) – color theme (default, blackboard, dawn, mac-classic, twitlight, vibrant).
  • inline (boolean) – when true forces code block to render inside <code></code> tag. Used to paste a single line of code into the regular text.
  • strict (boolean) – when true strict mode will be enabled. By default CodeColorer tries to guess whether strict mode is needed, so this option allows to force it on or off when automatic suggestion is wrong.
  • nowrap (boolean) – when false no horizontal scrollbar will be shown; instead code will be wrapped in the end of code box.
  • noborder (boolean) – when true no border will be shown around the code block.
  • no_cc (boolean) – when true the syntax in code block will not be highlighted, code will be rendered inside <code></code> tag.
  • class (string) – additional CSS classes to add to the wrapper HTML element.

You can use special tag [cci] instead of [cc] to force inline mode: [cci lang="lang"]code[/cci]

Most of these parameters could be configured via the CodeColorer options page.

Supported languages

Here is list of supported by CodeColorer languages: 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.

Requirements

Plugin works with WordPress 2.7.0 – 2.8.2 as well. Hey users of WordPress 2.7.0, could you explain why do you use so old buggy crap? Use new one instead, at least it looks more beautiful!

Download

The latest version of the CodeColorer plugin is 0.9.11, and you can download it here:

version0.9.11DownloadCodeColorer Plugin

Also you can download older versions from plugin home page on WordPress.org (but do you really need this old stuff?).

Translations

Thank you all guys, who submitted translations to your language. CodeColorer is currently available in following languages:

Want to help me with translation? It’s easy!

  1. Install Poedit.

  2. Download codecolorer.pot file.

  3. Click File/New catalog from .pot file and select codecolorer.pop you’ve just downloaded.

  4. Enter project name (something like CodeColorer 0.9.8), your name and email address, select a language you want to translate to and click OK.

  5. Enter a filename like codecolorer-en_EN.po and click Save.

  6. Translate all strings one by one.

  7. Send me a .po file with a translation to [email protected]. Do not forget a link to add to CodeColorer project home page.

  8. Thank you!

To fix existing translation, just open corresponding .po file from codecolorer/languages folder in Poedit, and add missing or update existing strings.

Customization

Syntax coloring is highly customizable: you could change color scheme for all
languages or for specific language. You could find CodeColorer CSS in
wp-content/plugins/codecolorer/codecolorer.css file. To change colors for
all languages edit lines below Color scheme section.

There is simple mapping exists between Textmate color themes and CodeColorer
ones:

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; }

Check the codecolorer.css file to get more examples.

Frequently Asked Questions

Q. How do I can customize CodeColorer CSS rules?
A. Go to the Options/CodeColorer page in Site Admin and change the “Custom CSS Styles” option.

Q. I see &lt; instead of < (or other HTML entities like >, &, ") in my code.
A. You should use [cc escaped="true"] or [cce] in the visual editor when inserting code into the post.

Q. Does it highlights my code on server or client side?
A. CodeColorer performs code highlighting on the server, you could see HTML of the highlighted code in page source.

Q. Is it produces valid XHTML source?
A. Yes, resulting XHTML is completely valid.

Q. Could my visitors insert their code snippets in comments?
A. Yes, CodeColorer supports code highlighting in comments using the same syntax, as you use in your blog posts.

Q. How can I disable syntax highlighting for a particular <code> block?
A. Use no_cc="true" option for your code block.

Q. I have updated the plugin to the newest version and now I keep getting following warnings:

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

A. Remove all files from wp-content/plugins/codecolorer folder and unpack an archive with plugin again (thanks to Anatoliy ‘TLK’ Kolesnick).

Q. I love this plugin. How to do a favor to the author?
A. Just vote for this plugin on WordPress.org. And thank you!

Support

If you have any suggestions, found a bug, wanted to contribute a
translation to your language, or just wanted to say “thank you”,– feel free to contact me. Promise, I will answer to every message.

If you want to contribute your code, see the Development section below.

Development

Sources of this plugin are available both in SVN and Git:

Feel free to check them out, make your changes and send me patches. Promise, I will apply every patch (of course, if they add a value to the product). Email for patches, suggestions, or bug reports: [email protected]. Also you have much more ways to contact me.

Changelog

  • 0.9.11 (August 8, 2017)
    • Fixed an issue with TinyMCE when CodeColorer options were removed in the editor (thanks to Jonathan Stassen for the suggestion).
    • New art for the WordPress plugins page.
    • Moved translations to https://translate.wordpress.org/projects/wp-plugins/codecolorer. WordPress should automatically download language packs now.
    • Lots of code style issues, should resolve all warnings in PHP logs.
  • 0.9.10 (July 28, 2017)
    • Fixed a bug with large code blocks margins.
    • Added Portuguese translation (thanks to Luis Coutinho).
    • Added Indonesian translation (thanks to Masino Sinaga).
    • Fixed PHP 7 compatibility issues (thanks to Steve Kamerman and Robert Felty).
    • Fixed WordPress 4+ compatibility (editor button, settings page layout).
    • Added “Solarized Light” and “Solarized Dark” themes (thanks to Matt Kirman).

Complete changelog could be found on the CodeColorer History page.

Other plugins

Full list of plugins I have implemented is available here.

228 Responses to this entry

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

said on April 1st, 2007 at 23:34 · Permalink · Reply

Ага, но он принципиально отличается тем, что реализован на JavaScript и раскрашивает синтаксис на клиенте. Хотя признаю, решение красивое :-)

said on April 10th, 2007 at 03:11 · Permalink · Reply

Несколько неудобным показалось то, что само “окошко” фиксированной высоты. я о тех случаях когда надо написать буквально пару строчек кода.
Можно было бы реализовать через min-height(expression для ИЕ) + overflow:hidden…немного гармонии так сказать ;)

said on April 10th, 2007 at 09:27 · Permalink · Reply

Хм… для пары строчек высота блока не фиксируется. Вот пример:

1
2
$a = 'Hello';
echo $a . ' world';

Фиксируется только для блоков кода, высота которых больше заданной в настройках.

said on April 10th, 2007 at 10:39 · Permalink · Reply

Упс,прошу прощения. Зачит, трабл с плагином где-то у меня.

said on May 1st, 2007 at 17:44 · Permalink · Reply

[…] 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. […]

said on May 8th, 2007 at 08:45 · Permalink · Reply

[…] CodeColorer — Плагин на библиотеке GeSHi (Generic Syntax Highlighter), поддерживающей несметное количество языков (71, если быть точным). Плагин прост в установке и настройке. Вот пример работы этого плагина: […]

said on May 20th, 2007 at 11:59 · Permalink · Reply

Установил. Запостил статью с блоками:

1
[cc lang="bash"]blablabla[/cc]

и

1
[cc lang="php"]blablabla[/cc]

Вместо этого текста при просмотре сайта отображается:

::CODECOLORER_BLOCK_1::

::CODECOLORER_BLOCK_2::

В чем дело?

said on May 20th, 2007 at 13:09 · Permalink · Reply

А какая у вас версия плагина и вордпресса? И используете ли вы визуальный редактор?

said on May 21st, 2007 at 00:57 · Permalink · Reply

Стоял WordPress 2.1.0 Русская версия с сайта maxsite.org
Плагин качал с Вас вчера.

Но уже там появилась 2.2.0 – с ней все ок.

Ну а с 2.1.0. разберитесь.

said on May 21st, 2007 at 00:59 · Permalink · Reply

Да и еще. Для подсветки синтаксиса конфигурационных файлов (apache, mysql, proftpd), чему лучше приравнивать параметр lang ?

said on May 21st, 2007 at 01:01 · Permalink · Reply

Еще замечание:

при вставке кода между тегами

[cc][/cc]

треугольных скобок они некорректно отображается :-(

said on May 21st, 2007 at 01:14 · Permalink · Reply

Mad Chicken: Большое спасибо за отзывы. Отвечу по порядку.

2.1.0 посмотрю, неожиданно как-то в нем сломалось.

Для подсветки кофигурационных файлов Apache язык apache, для конфига MySQL (если не ошибаюсь) подойдет ini, для самих запросов — mysql (либо просто sql, но тогда некоторые специфические для мускула вещи не подсветятся). Вот насчет ProFTPD — не знаю, возможно apache подсветит и его, уж больно похожи.

Насчет угловых скобок — это второй вопрос в секции ЧаВО чуть выше на странице. Съедает их вордпресс во время постинга в визуальном редакторе. Советую на время вставки примеров кода переключаться в редактор HTML (или вообще не использовать визуальный редактор ибо он от лукавого, постоянно лепит непонятные теги, причем не к месту).

Еще раз спасибо.

said on May 21st, 2007 at 16:51 · Permalink · Reply

Мне кажется что проблему с угловыми скобками можно решить в самом плагине, например производить замену < на нужный символ. К тому же угловые скобки часто встречаются в конфигурационных файлах апача, Mysql итд. Ведь даже если в 1й раз переключишся в режим редактирования кода html, то при следующем редактировании статьи – оптять косяки вылезут.

Имхо можно решить проблему.

said on May 21st, 2007 at 16:56 · Permalink · Reply

Я над этим работаю. Просто до этого времени основной задачей было исправить проблемы с XHTML и проблемами в комментариях. Сейчас образовалось немного времени на исправление этой багофичи вордпресса.

said on May 27th, 2007 at 12:27 · Permalink · Reply

Подскажите, пожалуйста, как выделить код прямо в строке, без переноса, так, как у вас сделано на сером фоне с пунктиром?

said on May 27th, 2007 at 12:57 · Permalink · Reply

У меня это сделано без CodeColorer, просто тег <tt>code</tt>, и в стилях поставил фон этому тегу. А за мысль спасибо, надо добавить в CodeColorer.

said on May 27th, 2007 at 17:02 · Permalink · Reply

Ясненько.

Спасибо за этот плагин! Очень удобная штука.

said on June 3rd, 2007 at 15:07 · Permalink · Reply

Дмитрий, еще такой вопрос.

Если код состоит всего из одной строки и он меньше ширины страницы, т.е. не появляется горизонтальный скролл, то под этой строкой появляется отступ, который “забронирован” для скролла.

Не очень красиво это выглядит. Можно как-то исправить?

Adam
said on June 22nd, 2007 at 06:05 · Permalink · Reply

I’m also getting ::CODECOLORER_BLOCK_1::. Using WordPress 2.1 without the visual editor. Could you translate your response to Mad Chicken? Thanks!

said on June 30th, 2007 at 06:12 · Permalink · Reply

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?

Bruno
said on August 2nd, 2007 at 00:35 · Permalink · Reply

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

Jan
said on August 29th, 2007 at 07:51 · Permalink · Reply
1
2
3
$awesome = "Dmytro";

echo $awesome . "rocks!!";
said on September 18th, 2007 at 01:14 · Permalink · Reply

[…] Отказался от плагина colorer в пользу Highlight. Оба плагина занимаются подсветкой […]

Cédric
said on October 7th, 2007 at 16:29 · Permalink · Reply

Here my test :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
stage.scaleMode = StageScaleMode.NO_SCALE;
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;

}
said on November 14th, 2007 at 06:39 · Permalink · Reply
1
<?xml version="1.0" encoding="utf-8" ?>
said on January 17th, 2008 at 13:32 · Permalink · Reply

Спасибо, очень удобный плагин, а то <code> как-то не очень удобен для вставки кода.

P.S. OpenID(Oher OpenID) не работает – ругается на curl_init, проверь…

Rodrigo
said on January 18th, 2008 at 20:27 · Permalink · Reply

Exist a client side (javascript) version of this plugin???

said on January 27th, 2008 at 17:38 · Permalink · Reply

Спасибо огромное за плагин!
Всё отлично, но поддержу Mad Chicken в его просьбе решить проблему с угловыми скобками. Посчу много шел скриптов – а там угловые скобки чуть не в каждой строчке. Переправлять каждый раз когда вносишь изменение в пост утомляет.

Ещё раз спасибо за плагин! )

said on February 4th, 2008 at 22:22 · Permalink · Reply

Спасибо за хороший плагин. Но у меня с ним тоже возникла проблема. При написании сообщения всё нормально сохраняется и выглядит в блоге. Но когда я решаю отредактировать написанный пост – то вместо нормального кода в редакторе вордпресса я вижу уже не то, что надо (например, если у меня был в коде тэг , то в редакторе его нет, просто переход на новую строку). И при повторном сохранении код уже портится. Что делать?

said on February 4th, 2008 at 22:24 · Permalink · Reply

Тэг “br” я имел в виду, вордпресс и тут вырезал его из коммента. :)

said on February 9th, 2008 at 15:07 · Permalink · Reply

[…] codecolorer благин с более обширным спектором возможностей: нумерация строк автоматическая вставка ссылок на документацию вычисление размера блока кода (короткий код будет заключен в маленький блок, для более длинного высота блока будет зафиксирована, и появятся полосы прокрутки) настройка стиля блока кода в Site Admin (Панель управления) настройка подсветки синтаксиса в файле CSS подсветка кода в комментариях защита кода от искажения WordPress’ом (например, двойные кавычки, длинные тире и т.п. будут выглядеть в точности так, как Вы их ввели) […]

said on March 17th, 2008 at 15:47 · Permalink · Reply

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:

1
Fatal error: Cannot redeclare class GeSHi in /home/accountname/public_html/home/wp-content/plugins/codecolorer/lib/geshi.php on line 158

Is it normal?

said on March 17th, 2008 at 16:00 · Permalink · Reply

Hi Raphael,
Looks like you have enabled another syntax highlighting plugin that uses GeSHi framework too. You must disable it before using CodeColorer.

said on March 18th, 2008 at 14:14 · Permalink · Reply

после активации плагина вкладка “плагины” админки wordpress не открывается, сносишь плагин по FTP все сразу нормально. Странный баг какой-то

sergey
said on April 9th, 2008 at 10:32 · Permalink · Reply

у меня почему то при активации плагина выскакивает ошибка в коде с блогом
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/)

More comments: 1 2 3 5

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.

Submit Comment