Dmytro Shteflyuk's Home Dmytro Shteflyuk's Home

thoughts about programming

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
  SOURCE_TYPES = {
    category: 0,
    tag:      1,
    user:     2,
  }
 
  define_enum :source_type, raise_on_invalid: true

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

  def video_ids
    v = self[:video_ids]
    v.present? ? 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:

  • i – inline
  • e – escaped
  • s – strict
  • n – line_numbers
  • b – no_border
  • w – no_wrap
  • l – no_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.
  • 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, geshi, railscasts, solarized-light, solarized-dark).
  • first_line (integer) – a number of the first line in the block.
  • highlight (string) – a comma-separated list of line numbers or ranges of line numbers to highlight (e.g. 1,5,8-11).
  • escaped (boolean) – when true special HTML sequences like &lt; or [ will be treated as encoded (in this example as < and [ respectively.)
  • line_numbers (boolean) – when true line numbers will be added.
  • no_links (boolean) – when false keywords will be represented as links to manual.
  • 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.
  • file (string) – when specified, code will be loaded from external file. Should be a relative to uploads folder path, only files from uploads are allowed to be embedded.

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 supports WordPress versions 3.5.0 and later. PHP 5.6 or newer is required (please check PHP: Supported Versions page to check if your version is still supported.)

Download

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

version0.9.14DownloadCodeColorer 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.14 (October 25, 2017)
    • IMPORTANT: Another line numbers column width issue for numbers bigger than 1000.
  • 0.9.13 (October 24, 2017)
    • IMPORTANT: Fixed line numbers column width issue, introduces in the previous version.
    • Fixed line numbers column position on RTL pages.
  • 0.9.12 (October 12, 2017)
    • Fixed XML syntax highlighting colors.
    • Fixed line highlighting color for dark themes.
    • Added support for TablePress plugin.
    • Line highlighting affects the whole block width, not only the code text.
  • 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'.

Zhen Chen
said on June 18th, 2012 at 15:34 · Permalink · Reply

Привет. На мультистраницах, на главной, форматирование кода не отображается? Можно как то это исправить? Использую тему Atahualpa 3.7.

George
said on August 9th, 2012 at 00:29 · Permalink · Reply

It would be so cool to have multiple language support in one code block! I love the plugin and intend to use it for a long time, but I think I would really like to see a lang code that supports the use of JS, CSS, HTML, and PHP all in one block. I know geshi does it with PHP and HTML already. Not sure how you could accomplish all together, or a combination, even if we had to define our own classes, colors.

Cheers bro, keep up the great work!

china
said on August 17th, 2012 at 01:39 · Permalink · Reply
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
class Prourl {
        /**
         * URL路由,转为PATHINFO的格式
         */
        static function parseUrl(){
            if (isset($_SERVER['PATH_INFO'])){
                    //获取 pathinfo
                $pathinfo = explode('/', trim($_SERVER['PATH_INFO'], "/"));
               
                print_r($pathinfo);
                    // 获取 control
                    $_GET['m'] = (!empty($pathinfo[0]) ? $pathinfo[0] : 'index');

                    array_shift($pathinfo); //将数组开头的单元移出数组
                   
                    // 获取 action
                    $_GET['a'] = (!empty($pathinfo[0]) ? $pathinfo[0] : 'index');
                array_shift($pathinfo); //再将将数组开头的单元移出数组

                for($i=0; $i<count($pathinfo); $i+=2){
                    $_GET[$pathinfo[$i]]=$pathinfo[$i+1];
                }
           
            }else{ 
                $_GET["m"]= (!empty($_GET['m']) ? $_GET['m']: 'index');    //默认是index模块
                $_GET["a"]= (!empty($_GET['a']) ? $_GET['a'] : 'index');   //默认是index动作
   
                if($_SERVER["QUERY_STRING"]){
                    $m=$_GET["m"];
                    unset($_GET["m"]);  //去除数组中的m
                    $a=$_GET["a"];
                    unset($_GET["a"]);  //去除数组中的a
                    $query=http_build_query($_GET);   //形成0=foo&1=bar&2=baz&3=boom&cow=milk格式
                    //组成新的URL
                    $url=$_SERVER["SCRIPT_NAME"]."/{$m}/{$a}/".str_replace(array("&","="), "/", $query);
                    header("Location:".$url);
                }  
            }
        }
    }
Brian Scholer
said on September 27th, 2012 at 00:58 · Permalink · Reply

Hi Dmytro, I love this plugin. I would like to report an issue I ran into (not sure if it’s a bug exactly), when loading code from a file. I uploaded a powershell script to my site and I had two problems with using CC to display it:

1) the script was using CR+LF and so the display showed extra line breaks. This was fixed when I changed to CR only, but powershell is used on Windows, and if I want to offer the file for direct download as well, it would be best if I could have it in CR+LF. Any chance of supporting these line endings natively?

2) My encoding was UTF-16. This is the default for powershell when you edit the scripts in Powershell ISE (the IDE for PS). This caused strange characters at the beginning of the script, improper highlighting, and loss of indentation. When I changed it to UTF-8 it was fine, but again, this means having to modify the files from default. I would love to see support for this as well.

I also have two feature requests:
1) A one-click copy button to put all of the code into the clipboard.
2) A download link to get the code as a file.

CC is already the best highlighting plugin in my opinion. These changes would make it perfect, for me.

Дмитрий
said on October 23rd, 2012 at 13:01 · Permalink · Reply

Просто огромное Спасибище за этот плагин!!!!

manuzhang
said on November 3rd, 2012 at 07:33 · Permalink · Reply

why no Shell?

Noname
said on November 3rd, 2012 at 12:33 · Permalink · Reply

Большое спасибо вам за качественный удобный плагин для WordPress, а главное рабочий.
P.S. Сейчас такие в репозитории можно по пальцам пересчитать в ряде областей применения.

Hans
said on January 5th, 2013 at 23:35 · Permalink · Reply

Love the plugin, specially now that I have it enabled on my bbPress plugin as well. Not sure if this is exactly the right way to do it, but it works for me.

Add the following code to your functions.php;

1
2
3
4
5
6
function t4a_bbp_shortcodes( $content, $reply_id ) {
   
    return codecolorer_highlight( $content );
}
add_filter('bbp_get_reply_content', 't4a_bbp_shortcodes', 10, 2);
add_filter('bbp_get_topic_content', 't4a_bbp_shortcodes', 10, 2);
sl
said on January 28th, 2013 at 05:52 · Permalink · Reply

How do I insert tabs? :(

Yusup
said on March 8th, 2013 at 08:04 · Permalink · Reply

Hi ,thanks for this great plugin.
how could I add support for a new language like Kotlin?

Pam Van Londen
said on July 6th, 2015 at 23:51 · Permalink · Reply

Where can I update the anchor href for html5 when I specify

1
<code lang="html">

??

Hans Luijten
said on December 24th, 2015 at 02:58 · Permalink · Reply

I’ve used this WordPress plugin for years now and just love it …
Since there have been quite a few changes in WP Core, I was wondering if this plugin will be updated in the near future?
(just curious, if development stopped, then I’d better prepare to switch to another plugin – which I’d hate to do)

Ben
said on September 28th, 2016 at 18:04 · Permalink · Reply

When will codeColorer work w/ php7.0?

I’m getting this error when using PHP7:

1
preg_replace(): The /e modifier is no longer supported, use preg_replace_callback instead in wp/wp-content/plugins/codecolorer/codecolorer-core.php on line 49
Yoann
said on September 7th, 2017 at 22:29 · Permalink · Reply

Hi,

I am facing this error when I try to use your plugin. The error occurs even when I’am on the “setting” page on the “preview” section.
As you can see, I’m running WordPress locally using Wamp server.

1
Fatal error: Call to private method CodeColorer::performHighlightCodeBlock() from context '' in C:\wamp\www\wordpress\wp-content\plugins\codecolorer\codecolorer-core.php on line 55

Any idea ?

Thnaks

More comments: 1 … 3 4 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