Source code highlighting using FCKeditor and GeSHi for Drupal

Submitted by Daniel Hanold on Sun, 10/26/2008 - 22:48

For the setup of this site, I knew that I needed a good way to display source code in stories. I assumed that Drupal would already have a good way to deal with source code in a post, but I found out that this required quite a lot of manual configuration. In addition to just displaying source code nicely, I wanted to be able to use source code in FCKeditor.

During my research, I came across a module called GeSHi Filter, which was exactly what I was looking for to display source code. This module integrates the third party PHP library GeSHi (Generic Syntax Highlighter) into Drupal. Installing this module was straightforward, except for the fact that the readme didn't mention that I needed to activate the filter in Drupal's input filters.

GeSHi takes care of displaying source code within the <blockcode> tag. Unfortunatley, using this tag in FCKeditor is tricky.

In order to use the <blockcode> tag in FCKeditor, one needs to switch to the source view. In that view, you can enter the source code you'd like to display in the post, and GeSHi will format it nicely once the node is submitted.

There's 2 caveats:

In order for FCKeditor to not screw up the code after switching back to rich text editing mode, the following line needs to be added to fckeditor.config.js:
FCKConfig.ProtectedSource.Add( /<blockcode language[\s\S]*?<\/blockcode>/gi );
According to the FCKeditor documentation, protected code is not being displayed at all in rich text mode. However, that code will be displayed when viewing the node.

Unfortunately, I wasn't able to find a better way to integrate the two. This integration works for now, but I hope that the a future release of FCKeditor will offer a better method for source code highlighting.

Thanks for the tips - I was

Submitted by Balefire (not verified) on Sat, 12/20/2008 - 13:37.

Thanks for the tips - I was in the process of (re)creating my site and was trying to figure out how to get FCKEditor & GeSHi working properly. I am going to give the GeSHi Pro FCKEditor plugin a go, may be what we are looking for!

Thanks for that tip. That

Submitted by Daniel Hanold on Sun, 01/04/2009 - 05:14.

Thanks for that tip. That looks indeed a lot easier than switching back and forth between the source code. Have you had success with that plugin for FCKEditor?

This module integrates the

Submitted by Anonymous (not verified) on Wed, 04/08/2009 - 18:26.

This module integrates the third party PHP library GeSHi (Generic Syntax Highlighter) into Drupal . Installing this module was straightforward, except for the fact that the readme didn't mention that I needed to activate the filter in Drupal's input filters.

This is an alternative way.

Submitted by Chao (not verified) on Sun, 04/12/2009 - 00:19.

This is an alternative way. Cannot say it's a better solution, but that's what I found when I was searching for a GeSHi and FCKedtitor solution:

http://www.shaunfreeman.co.uk/index.php?page=6

I personally find Drupal so

Submitted by Adam (not verified) on Sun, 07/05/2009 - 22:41.

I personally find Drupal so confusing, think I will stay with Wordpress until I can play around a bit more with the platform.

I was trying to solve it for

Submitted by vaibhav (not verified) on Sat, 10/10/2009 - 08:39.

I was trying to solve it for last two days. You save me a lot of time.
Hopefully future release of Fck editor will have this functionality.
Thanks

hi, thats great! thousand

Submitted by Anonymous (not verified) on Sun, 10/11/2009 - 17:36.

hi, thats great!
thousand thanks... !!!

I

Submitted by Anonymous (not verified) on Sun, 10/11/2009 - 17:38.

I added

FCKConfig.ProtectedSource.Add( //gi );
FCKConfig.ProtectedSource.Add( //gi ); FCKConfig.ProtectedSource.Add( //gi ); FCKConfig.ProtectedSource.Add( //gi );

so I can use code lang, too.

Nice article. But even I took

Submitted by vaibhav (not verified) on Thu, 02/25/2010 - 05:12.

Nice article. But even I took a lot of time to figure out how to edit fckeditor.config.js.
I have written a post, if you have similar issues.
http://www.techpint.com/programming/syntax-highlighting-using-geshi-filt...