You are hereBlogs / Vaibhav's blog / Syntax Highlighting using GeSHi Filter and FCKeditor in Drupal

Syntax Highlighting using GeSHi Filter and FCKeditor in Drupal

By Vaibhav - Posted on 23 February 2010

When I was developing this site, I knew I would be publishing a lot of Source Code. After some googling I foung GeSHi Filter for Source Code Syntax Highlighting. This module integrates the third party PHP library GeSHi (Generic Syntax Highlighter) into Drupal. GeSHi Filter, syntax highlight your source code between <blockcode>tag.

This module works very well for me unless I installed FCKeditor for Rich Text Editing. FCK editor twist your source code when you toggle between Source Code and Rich text editing in it. But with some manual configuration we can stop FCKeditor from twisting the source code.

FCKeditor Documentation suggests the use of

FCKConfig.ProtectedSource.Add(Regular Expression) ;

method to protect any string from FCKeditor. Any text which mataches the given Regular Expression  will not be touched by FCKeditor. We have to add the following code in fckeditor.cofig.js to protect our code from FCKeditor.


FCKConfig.ProtectedSource.Add( /<php>[\s\S]*?&lt;\/php&gt;/g );
FCKConfig.ProtectedSource.Add( /<csharp>[\s\S]*?&lt;\/csharp&gt;/g );
FCKConfig.ProtectedSource.Add( /<c>[\s\S]*?&lt;\/c&gt;/g );
FCKConfig.ProtectedSource.Add( /<javascript>[\s\S]*?&lt;\/javascript&gt;/g );
FCKConfig.ProtectedSource.Add( /<vbnet>[\s\S]*?&lt;\/vbnet&gt;/g );
FCKConfig.ProtectedSource.Add( /<sql>[\s\S]*?&lt;\/sql&gt;/g );
  • <php></php>, <csharp></csharp> etc are the tags used by GeSHi filter for Syntax Highlighting.
  • Likewise you can add code for any Language.
  • When you toggle to Rich Text Editing Mode, your source code will not be visible, but it will be published.
  • After editing fckeditor.config.js, you should clear the cached data of your Drupal website.

Thanks, this is what I was looking for so long.

Thanks for sharing.


echo "Thank you, good to know";


Ah, that was missing?

FCKConfig.ProtectedSource.Add( /\<?php[\s\S]*<\?>/g );

great share! that's exactly what i was looking for, thanks!

 I have heard many saying drupal emerging as one of the leading CMS platform for all content publishing needs, though currently wordpress holds the market but looking to all this post it seems in near future Drupal will become a tough competitor for Word press.

Thanks for sharing, we tried earlier the same solution for one of our Website Development Services, but this time it was success. Thnx

Post new comment

The content of this field is kept private and will not be shown publicly. If you have a Gravatar account, used to display your avatar.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr><br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong><font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike> <caption>
  • You can enable syntax highlighting of source code with the following tags: <c>, <cpp>, <csharp>, <drupal5>, <drupal6>, <java>, <javascript>, <mysql>, <php>, <python>, <ruby>, <sql>, <tsql>, <vbnet>, <xml>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.
  • Lines and paragraphs break automatically.

More information about formatting options