@madpilot makes

WordPress 2.0 mod: Insert highlighted code.

I have complained before about not being able to insert source code into WordPress when using the TinyMCE Rich Text Editor. Sure, I could switch to plain text mode, but frankly I would prefer an RTE as it makes entering posts much quicker. There is a TinyMCE plugin called insertcode written by by Maxime Lardenois which does exactly what I wanted. In fact, it even uses the GeSHI cde highlighter class (written in PHP) to do code highlighting. There is something like 50 different languages which are supported – Very cool.

Unfortunately, installation was not quite as simple as I hoped. Here is what I had to do (Substitute [blog_root] with the absolute path to your wordpress install):

  1. Untar the GeSHI tarball and copy the geshi.php files and geshi directory to [blog_root]/wp-includes
  2. Unrar (yes rar) the insertcode RAR file to [blog_root]/wp-includes/js/tinymce/plugins/insertcode (Create the insertcode directory first)
  3. THe RAR file I go didn’t have a directory structure – I don’t know whether I just messed up or what, but I had to create the following directories: config, css, images, jscripts, langs, webservice
  4. Copy config.php into the config directory, insertcode.css into the css directory, insertcode.gif into the images directory, insertcode.js into the jscripts directory all the php files into the webservice directory and all of the language files (e.g. en.js) into the langs directory. You should only have editor_plugin.js editor_plugin_src.js and insertcode.htm files in the insertcode dir.
  5. Open get_highlighted_code.php and change the $geshi->set_header_type(GESHI_HEADER_PRE) to $geshi->set_header_type(GESHI_HEADER_DIV)
  6. Open [blog_root]/wp-includes/js/tinymce/tiny_mce.gzip.php and find the line $plugins = apply_filters – add ‘insertcode’ to the array
  7. Still in tiny_mce.gzip.php add ‘insertcode’ to the line that starts with $mce_buttons = apply_filters
  8. Finally add the following to lines to the initArray javascript array:

content_css : “/[blog_url_path]/wp-includes/js/tinymce/plugins/insertcode/css/insertcode.css”,

encoding : “xhtml”,

This should add a new button to your toolbar with the letter “C” into. Pressing the button should pop a dialog box in which you can cut and paste code.

To make it look nice on the front end cut and paste the contents of insertcode.css into you themes’ style.css file:

That SHOULD be it.

<li class="li1">
  <div class="de1">
    [echo</span>](http://www.php.net/echo) print_message<span class="br0">(</span><span class="br0">)</span>;
  </div>
</li>

<li class="li1">
  <div class="de1">
    <span class="kw2">function</span> print_message<span class="br0">(</span><span class="br0">)</span> <span class="br0">{</span>
  </div>
</li>

<li class="li1">
  <div class="de1">
    <span class="kw1">return</span> <span class="st0">&#8220;Hello World!&#8221;</span>;
  </div>
</li>

<li class="li1">
  <div class="de1">
    <span class="br0">}</span>
  </div>
</li>

<li class="li1">
  <div class="de1">
    <span class="kw2">?></span>
  </div>
</li>

You will notice that the indentation gets stripped – this is (I think) a WordPress thing. I’ll post a solution once I figure one out :) Also, it can be a little tempermental – you have been warned. And as always: YMMV.

Edit: I’ve fixed the indent bug: check out this post.