2012年2月29日 星期三

CodeColorer ...Posted by Dmytro Shteflyuk

source: http://kpumuk.info/projects/wordpress-plugins/codecolorer/

CodeColorer

Posted by Dmytro Shteflyuk on  · Русский (183,083 views)
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 [ccilang="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.
  • 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: [ccilang="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.8, 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:
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 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.

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:kpumuk@kpumuk.info. Also you have much more ways to contact me.

Changelog

  • 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.
Complete changelog could be found on the CodeColorer History page.

Other plugins

Full list of plugins I have implemented is available here.

199 Responses to this entry

Subscribe to comments with RSS or TrackBack to 'CodeColorer'.
Sébastien Labonne@
said on November 17, 2009 at 10:06 pm · Permalink · Reply
Thanks for the wonderful add-in.
I’m having a little problem. When I’m checkin the post page, the add-in works fine. However, I’m having problems on my main page where the cc blocks appear instead.
Also, I tried us the VB language and the comment don’t seem to be recognized.
Sébastien
Tsalagi@
said on December 24, 2009 at 5:10 am · Permalink · Reply
Is this plugin supported on this website. If so I need some solutions to two issues.
1. When I use <code> it removes my text from my page.
2. When I set a theme I still get no colors on the code on my page.
Thanks in advance.
Tsalagi
said on December 24, 2009 at 5:12 am · Permalink · Reply
Try again.
1. When I use no_cc="true" my text is removed from my page.
Deimos
said on December 24, 2009 at 3:23 pm · Permalink · Reply
Добрый день, подскажите как то можно сделать чтобы когда человек вводит
{code lang=”"}тут текст{code} (специально заменил)
не вылазила ошибка, вот такая:
1
<code>тут текст<code>
У меня стоит последняя 0.9.7 версия, версия WordPress 2.7.1
Deimos
said on December 24, 2009 at 3:25 pm · Permalink · Reply
странно у вас не появилась ошибка, у меня пишет:
1
GeSHi Error: GeSHi could not find the language (using path /wp-content/plugins/codecolorer/lib/geshi/) (code 2)
Douglas
said on December 29, 2009 at 5:57 am · Permalink · Reply
Hi. There is a problem in your code that appear when yout set an image as background. To verify that creates a “stripe” image (www.stripegenerator.com) and add it as background (in codecolorer.css ) and you will see a continuity break (set the width as 100% in the plugin options). I searched in the code and I saw that the cause is the way that you show the line numbers. You calculate the numbers manually and create a table to show them. So there is a conflict between the end of the table and the rest of the container that you create to apply the user options. I solved in two ways. The simplest is to put a width=”100%” in your second , so the table will fill all the container space.
The second is to use the Geshi methods to show the lines:
1
2
$geshi->start_line_numbers_at($options['first_line']);
$geshi->enable_line_numbers(GESHI_FANCY_LINE_NUMBERS);
deleting the creation of the table.
thanks.
Dmytro Shteflyuk
said on December 29, 2009 at 12:34 pm · Permalink · Reply
I don’t like Geshi line numbers because when you copy code, browser copies them too. It’s really weird thing, so I ended up with this table implementation. Your point about 100% makes sense, I’ll take a look how it will impact code blocks layout.
Hikari
said on January 8, 2010 at 6:58 am · Permalink · Reply
Hello Dmytro!
I’ve found a bug in CodeColorer. If I try to set its width to 100%, it goes beyond its container (post or comment wrapper), making the page goes beyond browser’s width and creating an horizontal scroll on it.
To fix it, I’ve added the following styles:
1
2
3
4
5
6
7
8
.codecolorer-container{
    position: relative;
    width: 98%;
}
.codecolorer-container .codecolorer{
    position: absolute;
    top:0;
}
Setting .codecolorer‘s position to absolute “locks” it inside the first HTML element whose position is not static (because its position is based on that element), so setting .codecolorer-container to relative, makes it the element to where .codecolorer will be based.
Just to leave it documented, position allows us to change an element’s original position and area.position: relative; allows us to change it based on its original position. Since no top and left properties are set, they remain on their original position, but .codecolorer now can’t go beyond.codecolorer-container.
IDK if this is the proper way to fix it, but worked for me. Note also that I added width: 98%; to define its width, because the whole idea of using these styles is so that I can use % width.
Using style attibute is not good, a better idea would be use PHP to supply a CSS generated dynamically, it is much more powerful :D
Another tip: I needed to use code highlight in my theme, outside of shortcode filters. To do so, I used GetCodeHighlighted:
1
2
3
4
5
6
if(class_exists('CodeColorer')){
    $codeColorer = &CodeColorer::GetInstance();

    echo $codeColorer->GetCodeHighlighted($string);
    
}
$string is a normal string we use in posts and comments, it can have normal text with HTML and they won’t be highlighted, and we just use normal [ cc][ /cc] <code></code> and anything inside them will be highlighted!
Ah and of course, CodeColorer and WP-CodeBox work together nicely, they don’t share the same tags :D
Dmytro Shteflyuk
said on March 23, 2010 at 4:56 pm · Permalink · Reply
First of all, thanks for your suggestion about positioning. I will test in on different environments and then decide what to do.
About highlighting of an arbitrary piece of code: you can use codecolorer_highlight global function. It is defined in codecolorer.php and used just to do that (starting from version 0.9.7).
Quantum@
said on January 28, 2010 at 12:23 am · Permalink · Reply
I have made a modification to the plugin that uses Geshi to background highlight particular lines of already highlighted code. It’s a way of outlining specific lines of some code for tutorial use. The modification is described here.http://www.deltanova.co.uk/641/
Dmytro Shteflyuk
said on March 23, 2010 at 4:57 pm · Permalink · Reply
Thank you for your contribution. Just ported back your changes to the CodeColorer repo.
Quantum@
said on April 5, 2010 at 9:32 pm · Permalink · Reply
Following the integration of my previous modification into 0.9.8 I was asked by a user to enhance the highlight function to accept number ranges in addition to individual line numbers. The modification can be found here http://www.deltanova.co.uk/670/
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)