@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.

Sample Code
  1. < ?php
  2. echo print_message();
  3. function print_message() {
  4. return “Hello World!”;
  5. }
  6. ?>

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.

5 comments

  1. It doesn't work at my Blog...i've to check that!
  2. So, does step 8 take palce in the tiny_mce.gzip.php file? If so, I cannot seem to find it in my installation.
  3. Yes it does. See if there is a tiny_mce.php file? Are you using version 2.0 of Wordpress?
  4. For some reason, Myles, I don't see my last comment.



    From what I can tell, I do indeed have the tiny_mce.gzip.php file. I just can't find what is referenced in line 8. Do you know what line number I should be looking for?



    I am using WP 2.0.3, by the way.
  5. Firstly, an apology - the filename is tiny_mce_gzip.php, NOT tiny_mce.gzip.php



    On my install, it is line 120, so it should be around there. Hope that helps.

Leave a comment