Howto use geshifilter with FCKEditor in Drupal

If you need to do syntax highlighting in your Drupal posts then geshifilter is the module you are looking for. However, if you also have FCKEditor enabled to give you WYSIWYG editing capabilities then you will need to do a little tweaking to get them to work well together.

The problem

The problem, as far as I can tell, is that FCKEditor converts all special html characters to html entities and then geshi forces these to output to to browser as literal text, so for example:

I want this to display exactly like this

Will probably end up looking more like this, especially if you switch between FCKEditor's source view and WYSIWYG vew:

<p>I want this to display <b>exactly</b> like this</p>

The solution

I still haven't found the perfect solution but this is what I did to make things work better:

1. To allow us to easily use the geshi filter styles, add the style control to the FCKEditor toolbar by editing fckeditor.config.js:

   FCKConfig.ToolbarSets['DrupalFull'] = [
     ...
     ['FontFormat','FontName','FontSize', 'Style'],
     ...
   ];

2. And then add some custom styles to the style menu by editing fckstyles.xml (I set up 3 styles - php html and css).

   <style element="codeblock" name="Php Code block" type="text/css">
     <Attribute name="language" value="php" ></Attribute>
   </style>
   
   <style element="codeblock" name="HTML Code block" type="text/css">
     <Attribute name="language" value="html" ></Attribute>
   </style>
   
   <style element="codeblock" name="CSS Code block" type="text/css">
     <Attribute name="language" value="css" ></Attribute>
   </style>

3. To stop FCKEditor messing things up when switching between source and WYSIWYG views, you need to add this to your fckeditor.config.js file:

   FCKConfig.ProtectedSource.Add( /<codeblock language[\s\S]*?<\/codeblock>/gi  );

Caveats

As I said, it's not perfect. You must be in source mode to enter/edit your geshi filtered code, otherwise the HTML entity conversion will still happen. Once you have entered the code in source mode, you can freely switch between WYSIWYG and source modes, however, you will find that the code does not display correctly when in WYSIWYG mode (but it will display fine in your final output).