Blog | Tech Blog | Secure Coding | Twitter | RSS Feed
----

There are many code syntax highlighter plugins available for WordPress (e.g. iG Syntax Highlighter, WP-Syntax, etc) but almost all of them have a problem. They want you to write the code in “HTML editing mode”. If you use any kind of WYSIWYG or visual editors (like built in TinyMCE or offline clients’ similar modes), there is a grave problem. Your code becomes garbled. e.g.:

If you intend to write:


PLAIN TEXT
CODE:
  1.  cat abc > /dev/null

It might turn out as:

PLAIN TEXT
CODE:
  1. </p>
  2. <p>&nbsp;cat abc &gt; /dev/null
  3. </p><p>

 The issue here is that the code highlighting plugins use the “exact” text entered within the [ code ] (or similar) tags, and since we used the WYSIWYG/visual editors, they add html formatting tags to the code and also convert some special characters into HTML entities (e.g. > into &gt;, < into &lt;, white space into &nbsp;, etc).

The workaround is that you can write the code in html editing mode. But the problem here is that if you happen to switch to the visual mode or edit your post in this mode any time later, the problem will come back which makes editing posts a pain. So, here is a simple hack that will let you write your code in visual/WYSIWYG mode without doing anything special.

Note: Although this hack is for iG:Synatx Highlighter plugin, but it can be added similarly to other plugins as well.

Step 1) Open the file syntax_hilite.php.

Step 2) Go to line no. 191 and delete the following 3 lines:

PLAIN TEXT
CODE:
  1. $arrSearch = array("< ", "&lt; ", " >", " &gt;", "<&nbsp;", "&lt;&nbsp;", "&nbsp;>", "&nbsp;&gt;");
  2. $arrReplace = array("<", "&lt;", ">", "&gt;", "<", "&lt;", ">", "&gt;");
  3. $inTxt = str_replace($arrSearch, $arrReplace, $inTxt);

Step 3) At the same place (from where you deleted the lines), add the following lines:

PLAIN TEXT
CODE:
  1. $inTxt = strip_tags($inTxt);
  2. if (PHP_VERSION > 5.0)
  3. {
  4.   $inTxt = html_entity_decode($inTxt, ENT_QUOTES, "UTF-8");
  5. }
  6. else
  7. {
  8.    $arrSearch = array("&lt;", "&gt;", "&nbsp;", "&amp;");
  9.    $arrReplace = array("<", ">", " ", "&");
  10.    $inTxt = str_replace($arrSearch, $arrReplace, $inTxt);
  11. }

Step 4) Save the file.  That’s it. You’re done.

What we just did was strip out all the extraneous html formatting added by your editor and then convert the html entities into the characters that we want.

IMPORTANT: After this hack, you should write your code in visual mode. If you want to display some html code to your readers and write it in html mode of the editor then it might go boink. Otherwise it should be simple enough to create a new tag so that one set html editor code works and for another set, visual editor code works. But I would definitely recommend against it and anyways writing all code in visual mode, just like your other parts of your posts as its much more intuitive to write and easier to maintain and port to newer platforms.

For your reference, I’m attaching a copy of my own syntax_hilite.php here. File Attachment: syntax_hilite.php.shantz.zip (6 KB)

© Shantanu Goel | HACK: Fixing The Code Syntax Highlighter WordPress Plugins To Work With WYSIWYG
----
If you liked this post, then you can get free updates
Share and Enjoy:
  • Digg
  • del.icio.us
  • IndianPad
  • StumbleUpon
  • Technorati
  • Facebook
  • Live
  • Reddit
  • Slashdot
  • YahooMyWeb

Related posts