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:
Plugin based on GeSHi library, which supports most languages. CodeColorer has various nice features:
- 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
- syntax highlighting of the code in comments
- code protect from mangling by WordPress (for example, quotes, double-dashes, etc would look just right as you entered)
Installation
- Download and unpack plugin files to wp-content/plugins/codecolorer directory.
- Enable “CodeColorer” plugin on your Plugins page in Site Admin.
- Go to the Options/CodeColorer page in Site Admin and change plugin’s options as you wish.
- Use
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 codecolorer block, but without syntax highlighting). The list of available languages you could find below.
GeSHi Error: GeSHi could not find the language lang (using path D:\Web\haitao.name\wp-content\plugins\codecolorer\lib\geshi\) (code 2) - Have fun!
Syntax
To insert code snippet into your post (or comment) you should use
GeSHi Error: GeSHi could not find the language lang (using path D:\Web\haitao.name\wp-content\plugins\codecolorer\lib\geshi\) (code 2)
or <code lang="lang">code</cc> syntax. Starting from version 0.6.0 you could specify additional CodeColorer options inside
1 | </span></tt> tag: <span style="font-size: small;"><span style="background-color: #f0f0f0;"><tt>[cc lang="php" tab_size="2" lines="40"]// some code |
Note: You should always use double quotes or single quotes around the parameter value. Boolean values could be passed using string true or false, number 1 or 0.
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.
- no_links (boolean) — when false keywords will be represented as links to manual.
- lines (integer) — how many lines would be block height without scroll.
- lines (integer) — how many lines would be block height without scroll; could be set to -1 to remove vertical scrollbar.
- width (integer) — block width
- height (integer) — height in pixels; used when lines number is greater then “lines” value.
- theme (string) — color theme (default, blackboard, dawn, mac-classic, twitlight, vibrant).
All 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, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cfdg, cfm, cil, cobol, cpp-qt, cpp, csharp, css-gen.cfg, css, d, delphi, diff, div, dos, dot, eiffel, email, fortran, freebasic, genero, gettext, glsl, gml, gnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, lolcode, lotusformulas, lotusscript, lscript, lua, m68k, make, matlab, mirc, mpasm, mxml, mysql, nsis, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, perl, php-brief, php, pic16, pixelbender, plsql, povray, powershell, progress, prolog, providex, python, qbasic, rails, 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, winbatch, xml, xorg_conf, xpp, yaml, z80.
Requirements
Plugin works with WordPress 1.5 — 2.7 as well. But I recommend you to update your WordPress to latest version (2.7 currently), because it has many nice features.
Download
The latest version of the CodeColorer plugin is 0.7.2, and you can download it here:
version0.7.2DownloadCodeColorer Plugin
If you have any propositions, want to send feedback or found bugs, please post comments. It’s very important for me!
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. Usually you would use only following CSS classes:
- kw1, kw2, kw3 — keywords
- co1, co2, coMULTI — comments
- es0 — escaped chars
- br0 — brackets
- st0 — strings
- nu0 — numbers
- me0 — methods
To change colors for specific language copy default values and add language name with a period before it. For example, in this blog I’m using following color scheme for PHP:
Also you could change width of the code block in the top of CSS file (there are different values for different situations, for example when you code is places under <blockquote>).
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 < instead of < (or other HTML entities like >, &, ") in my code.
A. You are should not use the visual editor when writing 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.
Changelog
- v0.7.2 (Dec 30, 2008)
- Fixed color scheme for XML language.
- Added custom CSS styles block to the options page.
- Removed codecolorer.css.in file as deprecated.
- Fixed bug wich code block paddings when line numbers are disabled.
- v0.7.0 (Dec 29, 2008)
- Added predefined color themes (Slush & Poppies, Blackboard, Dawn, Mac Classic, Twitlight, Vibrant Ink).
- Added block width and height options, removed line height.
- Fixed bug with plain text formatting.
- Added ability to remove vertical scrollbar.
- Line numbers will be rendered into the table, so they will not be copied to clipboard along with code.
- Options page layout updated to WordPress 2.7 look&feel.
- GeSHi updated to version 1.0.8.2.
- v0.6.0 (May 12, 2007)
- Added ability to configure tab size.
- Fixed problems with invalid XHTML code after highlighting.
- Fixed bug when code sample started in the same with text.
- Now it’s possible to configure specific code block.
- Great code refactoring.
- v0.5.1 (Apr 1, 2007)
- GeSHi updated to version 1.0.7.19.
- v0.5.0 (Mar 31, 2007)
- Added ability to disable links to documentation on the CodeColorer options page.
- GeSHi updated to version 1.0.7.18.
- v0.4.0 (Mar 26, 2007)
- Now you could insert code blocks in the comments.
- It’s possible to use single quotes (
) now.1
- v0.3.0 (Dec 11, 2006)
- Fixed bug with double quotes mangling.
- Fixed problems with code block height calculation and scrollbars.
- v0.2.0 (Nov 6, 2006)
- CodeColorer options page implemented.
- v0.1.0 (Nov 1, 2006)
- Initial plugin implementation: syntax highlighting, options in the plugin file.




这个可以兼容WP-Syntax这个吗?
如果我删掉WP-Syntax这个,你这个可以替代他吗?
很好的工具,可是没有一个行之有效的输入方法。如果我在Visual模式中输入比如c++代码,那么就会像这样一起显示html代码:
int main()
{
……
如果我在源代码模式去掉这些html吗,那么就没有换行,像这样:
int main() {……}
不知怎样解决
Great post! I’ll subscribe right now wth my feedreader software!
楼主辛苦了~谢谢分享!
WordPress很多插件都挺有用的!
我今天到此一逛
欢迎继续光临!