Ok, after going away and thinking about the problem, I came up with a quick and dirty (But seemingly effective and compliant) way of doing the indenting. It does require a small modification to the GeSHi code. I’m going to use an empty inline tag (ins tag - which stands for insert - how appropriate…)
Open the geshi.php file (See my previous post about code highlighting in WordPress 2.0 if you have no idea what I’m talking about) and find the indent function. Search for all the nbsp elements and replace with:
-
< ins class=“in” > < /ins>
Now open the insertcode.css file and the style.css (in your theme) and add:
-
ins.in {margin-left: 15px;}
Voila! indenting. The output looks like this:
-
< ?php
-
-
-
return “world”;
-
}
-
?>
A few more notes: html and xml highlighting is pretty well broken unless you add a erroneous space between the angle bracket and the tag (See this example) and don’t try to use special characters. I’m currently tweaking the colour coding classes to make them look nicer too. I’ll post these when they are done.
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):
- Untar the GeSHI tarball and copy the geshi.php files and geshi directory to [blog_root]/wp-includes
- Unrar (yes rar) the insertcode RAR file to [blog_root]/wp-includes/js/tinymce/plugins/insertcode (Create the insertcode directory first)
- 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
- 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.
- Open get_highlighted_code.php and change the $geshi->set_header_type(GESHI_HEADER_PRE) to $geshi->set_header_type(GESHI_HEADER_DIV)
- Open [blog_root]/wp-includes/js/tinymce/tiny_mce.gzip.php and find the line $plugins = apply_filters - add ‘insertcode’ to the array
- Still in tiny_mce.gzip.php add ‘insertcode’ to the line that starts with $mce_buttons = apply_filters
- 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
-
< ?php
-
-
function print_message() {
-
return “Hello World!”;
-
}
-
?>
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.
