This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

CodeColorer

Description

CodeColorer is the plugin which allows you to insert code snippets into the
post with nice syntax highlighting.

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, Railscasts)
  • syntax colors customization in CSS file
  • code protect from mangling by WordPress (for example, quotes, double-dashes,
    and others would look just right as you entered)

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.9), your name
    and email address, select a language you want to translate to and
    click OK.
  5. Enter a filename like codecolorer-en_EN and click Save.
  6. Translate all strings one by one.
  7. Send me a .po file with a translation to kpumuk@kpumuk.info.
    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.

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 email me kpumuk@kpumuk.info.
Promise, I will answer every email I received.

If you want to contribute your code, see the Development section under
the Other Notes tab.

Supported languages

Here is list of supported by CodeColorer languages: 4cs, abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoconf, autohotkey, autoit, avisynth, awk, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cfdg, cfm, cil, clojure, cmake, cobol, cpp-qt, cpp, csharp, css, cuesheet, d, dcs, delphi, diff, div, dos, dot, ecmascript, eiffel, email, erlang, fo, fortran, freebasic, fsharp, gambas, gdb, genero, gettext, glsl, gml, gnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lisp, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, mapbasic, matlab, mirc, mmix, modula3, mpasm, mxml, mysql, newlisp, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, oxygene, pascal, per, perl, perl6, pf, php-brief, php, pic16, pike, pixelbender, plsql, povray, powerbuilder, powershell, progress, prolog, properties, providex, purebasic, python, qbasic, rails, rebol, reg, robots, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, yaml, z80.

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:
kpumuk@kpumuk.info.

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:

/* "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.

Screenshots

  • Ruby syntax highlighting without scrollbars (Vibrant theme).
  • Ruby syntax highlighting with scrollbars (Twitlight theme).
  • Inline code syntax highlighting.
  • Settings page.

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</cc> syntax to
    insert code snippet into the post (you could skip lang="lang", in this
    case code would be in CodeColorer’s code block, but without syntax
    highlighting). Also you can use [cci lang="lang"]code[/cci] to format
    inline code (see the “inline” option description).
  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</cc> syntax. Starting
from version 0.6.0 you could specify additional CodeColorer options inside
[cc] tag:

[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 [ccM_LANG], where LANG is
your programming language, and M 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:

[cclN_php]
echo "hello"
[/cclN_php]

Already escaped HTML code:

[ccie_html]&lt;html&gt;[/ccie_html]

Ruby code without wrapping having tab size equal to 4:

[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).
  • 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
    `. 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 ``` 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="php"]some code[/cci]

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

To insert example of CodeColorer short codes you can use something like this:

[cce_bash]
&amp;#91;cc lang="html"]
<title>CodeColorer short code colorized</title>
&amp;#91;/cc]
[/cce_bash]

FAQ

How do I can customize CodeColorer CSS rules?

Go to the Options/CodeColorer page in Site Admin and change the
“Custom CSS Styles” option.

I see &lt; instead of < (or other HTML entities like >, &, ") in my code.

You should use [cc escaped="true"] or [cce] in the visual editor when
inserting code into the post.

Does it highlights my code on server or client side?

CodeColorer performs code highlighting on the server, you could see HTML of
the highlighted code in page source.

Is it produces valid XHTML source?

Yes, resulting XHTML is completely valid.

Could my visitors insert their code snippets in comments?

Yes, CodeColorer supports code highlighting in comments using the same syntax,
as you use in your blog posts.

How can I disable syntax highlighting for a particular `` block?

Use <code no_cc="true"> option for your code block.

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

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

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

How to insert code from an external file?

You can upload this file using WordPress upload or put it somewhere in uploads folder,
and the specify relative path using file="relative/path/to/file" attribute:

[cc_ruby file="test_project/main.rb"][/cc_ruby]

This snippet will insert code from the UPLOADS_DIR/test_project/main.rb file.

Contributors & Developers

“CodeColorer” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

0.9.9 (April 28, 2011)

  • Added ability to highlight ranges of lines (thanks to DELTA NOVA).
  • GeSHi updated to 1.0.8.10 (now with Google Go support!).
  • Updated Simplified Chinese translation (thanks to KenSai).
  • Added Hungarian translation (thanks to daSSad).
  • Added Traditional Chinese translation (thanks to Horace Cheng).
  • Added Romanian translation (thanks to Bogdan M. Botezatu).
  • Added file="file" attribute to load code from external files (thanks to Mészáros Márton).
  • Added Slovak translation (thanks to ceco).
  • Added Malay translation (thanks to Shareef Sam).
  • Fix for notice ‘has_cap was called with an argument that is deprecated since version 2.0!’ (thanks to Lenon Marcel).
  • Fixed undefined index warnings (thanks to Lenon Marcel).
  • Added Railscasts theme (thanks to Ankit Ahuja).
  • Fixed Twitlight theme (strings and symbols coloring was broken).

0.9.8 (March 23, 2010)

  • Added an icon to the admin options page.
  • Updated Arabic translation (thanks to Amine Roukh).
  • GeSHi updated to 1.0.8.6.
  • Added ability to highlight specified lines (thanks to DELTA NOVA).
  • Added Czech translation (thanks to Lelkoun).
  • Added Georgian translation (thanks to Nika Chkhikvishvili).
  • Added Persian translation (thanks to Hamed Momeni).
  • Some unit tests added.

0.9.7 (December 19, 2009)

  • Fixed theme="geshi" attribute bug.
  • Added ability to highlight arbitary piece of code from PHP.
  • Use wp_enqueue_style instead of echoing plain HTML.
  • Fixed problem with escaped code blocks, when some entities were not unescaped.
  • Fixed compatibility with WordPress 2.9.

0.9.6 (December 18, 2009)

0.9.5 (August 27, 2009)

  • Added Dutch translation (thanks to Martijn van Iersel).
  • Added Spanish (Argentina) translation (thanks to Diego Sucaria).
  • Added Arabic translation (thanks to Amine Roukh).
  • Fixed bug in Safari 4 caused by text-align=justify in parent container.

You can find complete changelog on the CodeColorer history
page.