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:
cat abc > /dev/null
It might turn out as:
</p>
<p> cat abc > /dev/null
</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 >, < into <, white space into , 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:
$arrSearch = array("< ", "< ", " >", " >", "< ", "< ", " >", " >");
$arrReplace = array("<", "<", ">", ">", "<", "<", ">", ">");
$inTxt = str_replace($arrSearch, $arrReplace, $inTxt);
Step 3) At the same place (from where you deleted the lines), add the following lines:
$inTxt = strip_tags($inTxt);
if (PHP_VERSION > 5.0)
{
$inTxt = html_entity_decode($inTxt, ENT_QUOTES, "UTF-8");
}
else
{
$arrSearch = array("<", ">", " ", "&");
$arrReplace = array("<", ">", " ", "&");
$inTxt = str_replace($arrSearch, $arrReplace, $inTxt);
}
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)
[tags]Hack, WordPress, Plugin, iG:Syntax Hiliter, WP-Syntax, code, code hilighting, strip_tags, html_entity_decode, html entities, WYSIWYG, visual editor, html editor, TinyMCE[/tags]
Shantanu,
I’m using wp-syntax, as it’s the only one that really does what I want. Can you point me to the right place in the code as the problem you’ve described is really annoying indeed?
Thanks!
@Artem: I’ll try to look into it. But not much time right now, so might be possible by next weekend only..just remind me around next thursday..
I am interested in a fix for WP-Syntax too! Thanks for your help!
@Artem, Martin: I just took a cursory look at wp-syntax plugin. I think you can add the above mentioned lines in wp_syntax_code_trim function in wp-syntax.php, just before the “return $code” statement.
All you need to do is instead of $inTxt, you have to use $code in those lines.
I haven’t tested it but I think it should work. Let me know if you face any issues.
Thanks for the tip! But it doessn’t have an effect.
It changes nothing at all, as far as I can see.
Switching from Wysiwig view to Code view always changes the < into a <.
@Martin: It won’t change anything while you are “editing” and switching between the wysiwig mode and code mode. It is supposed to “show” the change in the final output, i.e. on the page that your end-users will view. e.g. if you write some code in wysiwig mode and save it, then without the above mentioend change, ur users will see “& lt ;” (without the spaces) instead of <, but with this change they will see the character correctly.
OK! Know I understand. I use only your code lines 8 to 10. I have php5 active but html_entity_decode doesn’t seem to work correct.
Thanks it works perfect!!!!!!!
Have a nice rest-weekend.
[...] herzlichen Dank an Shantz der hier den entscheiden Hinweis [...]
I do not believe this
@fornetti: Do not believe what?
I have written a plugin for Geshi highlighting using shortcodes. It works ok in Visual mode. I will appreciate all comment and suggestions.
http://wordpress.org/extend/plugins/wp-synhighlight/
@FractalizeR
I’ve been waiting for someone to do that! I’ll be testing your plugin shortly.
Welcome
You can send all comments by email (address is on site and in README with plugin) or post on WP forum
@Fractalizer: Cool. I’ll try out the plugin. BTW, the problem I see with short code based solutions is that if/when such a plugin stops working, then that means one has to go through the old posts changing the code.
You mean to remove shortcode itself? Yes, but if you don’t like a plugin, you can easily make a stub just to get rid of shortcode.
@Fractalizer: just found out that there is a simple function in wordpress to make your own shortcodes in a jiffy instead of preg_replacing them ourselves, maybe i can use the same in case of a plugin becoming obsolete to turn all such shortcodes into “pre” tags on the fly.
Anyways, I’ll check out ur plugin soon. It’s always good to see fellow developers’ work
I don’t use preg_replacing of course
I am using ShortCodes API provided by WP 2.5 and up.
yo man im using code codesnippet from wordpress plugins. http://wordpress.org/extend/plugins/codesnippet-20/ Im facing the same problem when i use the html editor it messes my code and when i use the plain text editor it works. Do you know what i can do for this plugin?