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
-
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
[cc lang="lang"]code[/cc]
or<code lang="lang">code</code>
syntax to insert code snippet into the post (you could skiplang="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. -
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
<
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:
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:
- English
- Russian – Русский
- Ukrainian – Українська
- Arabic – العربية (thanks to Amine Roukh)
- Belarusian – Беларуский (thanks to И. Фадков)
- Czech – Čeština (thanks to Lelkoun)
- Danish – Dansk (thanks to Hans Klysner)
- Dutch – Nederlands (thanks to Martijn van Iersel)
- French – Français (thanks to Valentin PRUGNAUD, fanta78, Sylvain Zabé, and Whiler)
- Georgian – ქართული ენა (thanks to Nika Chkhikvishvili)
- German – German (Deutsch) (thanks to Fabian Schulz and Michael Gutbier)
- Hebrew – עִבְרִית (thanks to Yaron Ofer)
- Italian – Italiano (thanks to CodeSnippet)
- Japanese – 日本語 (thanks to Kuroneko Square)
- Persian – فارسی, پارسی, دری (thanks to Hamed Momeni)
- Polish – Polski (thanks to Andrzej Pindor)
- Brazilian Portuguese – Português Brasileiro (thanks to Paulo César M. Jeveaux, Fabricio Bortoluzzi, and Rodolfo Leão)
- Simplified Chinese – 简化字 (thanks to liuxiangqian)
- Spanish – Español (thanks to Sergio Díaz)
- Spanish – Español (Argentina) (thanks to Diego Sucaria)
- Spanish – Español (Colombia) (thanks to Diego Alberto Bernal)
- Swedish – Svenska (thanks to LHLI)
- Turkish – Türkçe (thanks to Hasan Akgöz)
Want to help me with translation? It’s easy!
-
Install Poedit.
-
Download codecolorer.pot file.
-
Click File/New catalog from .pot file and select codecolorer.pop you’ve just downloaded.
-
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.
-
Enter a filename like codecolorer-en_EN.po and click Save.
-
Translate all strings one by one.
-
Send me a .po file with a translation to [email protected]. Do not forget a link to add to CodeColorer project home page.
-
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 < 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.
I have as similar issue as Kevin, nothing shows up while the html source seems valid.
This is what I am trying to display:
2
3
''' This is a test function '''
print "Testing ..."
Could it be possible that my theme is somehow overwridding the css used for displaying the code?
Tested with default themes and still a no go!
What are the chances that you can make the output visual retranslate the < and %gt; back into > and doesnt output translated, see this post:
http://frumph.webcomicplanet.com/code-snippets/wordpress/adding-multi-user-php-free-chat-into-wpmu/
2
3
4
5
6
7
8
9
10
11
12
13
14
:born => '2008-06-09 18:22:00 EDT',
:weight => {:lbs => 6, :oz => 8},
:length => {:inches => 21.25})
skoglunds.children << piper
piper.daily do |p|
8.times do
p.eat
p.poop
p.sleep
end
end
У меня подсветка Java кода отображается некорректно после символа @ в коде. Посмотрим, как у вас.
2
3
4
5
6
@Override
public String toString() {
return "Test";
}
}
Добрый день.
Есть предложение насчет улучшения плагина.
Итак хотелось бы получить такой же функционал как и в этом плагине syntaxhighlighter-plus. Т. е. менюшки сверху и такуюже тему оформления defaut.
Насчет дополнения функционала можно просто скрестить 2 плагина – так получатся менюшки.
А как перенести тему defaut в CSS еще не знаю.
Great plug-in, really useful. Can I add a vote for width to be specified in percentage? If I make it look just right on the PC, mobile browsers have heart attacks ;)
In codecolorer.php I would change
2
3
echo '<link rel="stylesheet" href="' . get_option('siteurl') . $this->pluginLocation . 'styles.php" type="text/css" />', "\n";
}
to
2
3
4
5
6
if (trim(get_option('codecolorer_css_style'))!='')
echo '<link rel="stylesheet" href="' . get_option('siteurl') . $this->pluginLocation . 'styles.php" type="text/css" />', "\n";
else
echo '<link rel="stylesheet" href="' . get_option('siteurl') . $this->pluginLocation . 'codecolorer.css" type="text/css" />', "\n";
}
because that way, the STYLES.PHP is only called if its really necessary.
And if I were you I wouldn’t store the additional CSS in the options at all but in an additional CSS-files because your “styles.php” requires “wp-load.php” and this takes a long time to load. And this only happens because you need the getoption-function.
Thank you very much for this beautyful plugin!
I’m getting it to work really fine in wordpress. With enthusiasm!
Some small observations:
Setting the tabsize to less than 4 in the options panel doesn’t seem to change it, it still shows “4” after a submit change and reload.
Then I think the stules for xml in the default theme write:
.twitlight .xml .re1 { color: #008080; }
/* Constant */
.twitlight .xml .re0 { color: #0080A0; }
– the exact same as in the twitlight theme.
Then actionscript3 misses the ‘extend’ method. I’ve written a comment on the SELD BE blog about it.
Any chance the themes not used could be ommitted in the loaded documents? It seems like a lot of css to load, then to override..
But this is fun and your plugin is wonderful!
regards and thanks
Kamilla
I’m using your plugin, and noticed that it only ever seems to work on my single post pages and not the index:
Here’s an example of the single page:
http://s1n.dyndns.org/index.php/2009/05/14/more-sub-confusion/
See my main index for an example where it’s not applying the style:
http://s1n.dyndns.org
Any ideas?
hi, I’m simaopig.
I want know how i can set the keyword link open in new tab or new window?
Hope your mail. Thank you!
2
3
4
5
6
7
8
int main(int argc, char *argv[]) {
NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
int retVal = UIApplicationMain(argc, argv, nil, nil);
[pool release];
return retVal;
}
2
3
4
5
6
7
8
int main(int argc, char *argv[]) {
NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
int retVal = UIApplicationMain(argc, argv, nil, nil);
[pool release];
return retVal;
}
2
3
4
5
6
7
8
int main(int argc, char *argv[]) {
NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
int retVal = UIApplicationMain(argc, argv, nil, nil);
[pool release];
return retVal;
}
2
3
4
5
6
7
8
int main(int argc, char *argv[]) {
NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
int retVal = UIApplicationMain(argc, argv, nil, nil);
[pool release];
return retVal;
}
Hi there,
Was wondering if you could just make one small fix to your very useful plugin–
Change line 135 of codecolorer.php to:
Then add to codecolorer.css:
Or something semantically named like “line-numbering”.
I’m a bit of a nut of separating formatting from structure, even if it is not 100% clear yet on whether HTML5 will remove the cellpadding and cellspacing attributes (since the spec is still in draft), I still think it’s a good practice to follow it.
And this is just an idea but, although there are no namespaces in CSS, I wonder whether using “:” or “.” in the class name might help ensure that there were no collisions when including another CSS library. Of course, that’d be more work, but just an idea. Maybe prefix the attributes with “cc:” or something?
Thank you!
Sorry, I of course meant prefix the class attribute values, not the attribute (name).
hey there –
thanks for the plugin! a quick question – how do you add a “TAB symbol?”
much appreciated.
I went to activate this plug in and my entire blog and admin went down.
After updating to WordPress 2.8.1 i can’t access the options-page of codecolorer. Could you fix that?
After updating the plugins i have any problem… you can see, for exaple, this page http://codesnippet.altervista.org/scaricare-sorgente-di-una-pagina-in-c/ . Your plugins is very cool, i hope can you fix this problem. For all style have this problem…
Good job.
(sorry for bad english)
To codesnippet: sorry for this weird problem. Fixed in 0.8.1 (already on wordpress.org and will be available using automatic update very soon). Thank you for report.
Dmytro Shteflyuk, thank you for this plugins and thank for fix the problem.
Sorry for my double post.. i found other problem… in rss feeds i see code correcly only IE but Firefox and Opera have some problem to interpret it. Is problem for firefox and Opera or is problem the script?
an other one problem, i don’t know, but, now, i can’t set the height for block.. the block of code is equal to lines of code.. and not is equal at pixel can i set on administration panel. For example, before, in this page (http://codesnippet.altervista.org/conto-alla-rovescia-in-javascript/) i have the vertical scrool.. now, for only value in the height box, i see all code.
Thank you e sorry again for my english..
sorry again for triple post :D . I can traslate your script in italian language if is not problem for you.. tell me.. ;)
————–
To codesnippet: height problem has been fixed in version 0.8.2, which will be pushed out later today (or tomorrow). Italian translation would be really great!
I’ve update it to 0.8 ,but i didn’t see style.php in my plugin.
So it didn’t work right,and i use the old version now..
There is no need for styles.php now, because it really slows down the whole site. Instead plain old CSS file + a little of custom CSS in page head will be used. Hope you will appreciate it.
Also make sure you are installed 0.8.1 since 0.8.0 has weird bug with styles inclusion.
Dmytro Shteflyuk ok. I send on you email the tralation of script.
In the last version compare two warning when i paste php code
2
3
Warning: preg_match() [function.preg-match]: Compilation failed: unrecognized character after (?< at offset 3 in /membri/codesnippet/wp-content/plugins/codecolorer/lib/geshi.php on line 2132
Which version of PHP do you use? Looks like latest GeSHi has a problem with old PHP releases.
Ok. I have read the geshi source sode…
2
preg_match($delimiters, $code, $matches_rx, PREG_OFFSET_CAPTURE, $i))
this is the interested line..
Not is an problem the script.. but my hosting using a version of PHP < 4.3.0.
Looks like the easiest way for you to fix this error is to replace following lines in lib/geshi/php.php:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"(?>[^"'?\\/<]+)|".
"\\?(?!>)|".
"(?>'(?>[^'\\\\]|\\\'|\\\\\\\|\\\\)*')|".
"(?>"(?>[^"\\\\]|\\\\"|\\\\\\\\|\\\\)*")|".
"(?>\\/\\*(?>[^\\*]|(?!\\*\\/)\\*)*\\*\\/)|".
"\\/\\/(?>.*?$)|".
"\\/(?=[^*\\/])|".
"<(?!<<)|".
"<<<(?<phpdoc>\w+)\s.*?\s\k<phpdoc>".
")*(?<end>\\?>|\Z)/sm",
5 => "/(?<start><%)(?:".
"(?>[^"'%\\/<]+)|".
"%(?!>)|".
"(?>'(?>[^'\\\\]|\\\'|\\\\\\\|\\\\)*')|".
"(?>"(?>[^\\"\\\\]|\\\\"|\\\\\\\\|\\\\)*")|".
"(?>\\/\\*(?>[^\\*]|(?!\\*\\/)\\*)*\\*\\/)|".
"\\/\\/(?>.*?$)|".
"\\/(?=[^*\\/])|".
"<(?!<<)|".
"<<<(?<phpdoc>\w+)\s.*?\s\k<phpdoc>".
")*(?<end>%>)/sm",
with these:
2
5 => "/(<%)(?:'(?:[^'\\\\]|\\\\.)*?'|"(?:[^"\\\\]|\\\\.)*?"|\/\*(?!\*\/).*?\*\/|.)*?(%>|\Z)/sm"
Ok.. i used for fix the problem. Thanks ;)
something wrong with latest version, the “disable showing lines” doesn’t work!
Shame on me! Releasing 0.8.4. Too many releases in two days :-)
Do you know ? The new version for mysql is wrong.
The Link is wrong ,and the code is not right.
You can test.
By the way , I like it ,So I hope it wonderful.Thank you.
2
3
4
5
6
7
8
创建一个qq表,将qq_id设为主键,且没有对其进行NOT NULl约束
*/
create table qq(
qq_id int(10),
nick_name varchar(255) not null,
primary key (qq_id)
)
Ah ha, I know ,if use the link to the mySql doc ,it’s wrong..
You can test..EN..
I see, thank you!
Not at all, hope your new version.
Sorry, my english is poor..(*^__^*) ……
Hi Dmytro,
I found a bug in the latest version. In codecolorer-options.php, the following line:
As you can see, its updating the ‘codecolorer_tab_SITE’ variable in the database instead of the ‘codecolorer_tab_SIZE’ variable. This makes it impossible to edit the default tab size in the codecolorer settings unless you manually edit the database entry. :-)
Oh I forgot to tell you thank you for the great library Dmytro! Its clearly the best syntax highlighter out there for WP.
Thank you for your feedback, Marc
>Исправлена проблема, блокирующая доступ к странице
>настроек CodeColorer в WordPress 2.8.1.
Подскажи как исправил?
> Добавлена возможность задавать высоту и ширину блока в
> пикселях, em, процентах.
Огромное спасибо!