I have been documenting some C++ codes (or can be any codes) over the past few months on wordpress, with the Syntax-highlighter-evolved plugin. Everything had worked fine. e.g. the C++ codes displayed correctly in post. e.g. the following syntax would display C++ codes nicely in wordpress.
[code language="cpp"]
c++ codes goes here...
[/code]
Recently, I have started exploring using mark-down in wordpress and started writing mark-down in new posts with the wp-markdown plugin. (For the benefits of simplicity and ease of migration / sharing / maintenance in long term).
... And then ... I realized all of my older posts (with codes wraped in the Syntax-highligher-evolved syntax) have all got corrupted!
For example, characters (like < > etc), got converted into HTML entities (like < > etc). In addition, I also see LOADS of HTML tags being inserted into the C++ codes.
See here for a sample post on my wordpress site (scroll down to and you will see some code blocks.). It contains some supposingly C++ codes which now looks nothing like C++ codes.
Following discovering this error I have attempted playing around with activating and deactiving the plugins to see if I could get back to the working state (i.e. codes being displayed as C++ codes, instead of hybrid C++/HTML code). No luck so far.
(Currently I have both syntax-highlighter-evoled and wp-markdown plugins activated).
Has anyone encountered similar problems before and how did you resolve this?
Would be very grateful for all the help!
As a workaround I have (1) disabled the wp-markdown plugin. (2) Kept the syntax-highlighter-evolved activated. (3) Activated the Jetpack markdown plugin. The manual workaround steps below helped me correct 1 (out of about 100) posts.
It looks like the Jetpack markdown plugin complement better with the syntax-highlighter-evolved plugin. (based on my observations so far.)
As an experiment, I have modified manually an old post by (1) turning the wordpress visual editor off. (2) edited that old post. Here are the new vs old.
when I started editing the old post, I noticed that the entire post was converted automatically to mark-down format in the editor (which is good). The good news was, the unexpected HTML tag now had gone away (I presume because I was using the bare minimum wordpress editor, instead of the visual editor). So at least I could recover / copy the entire chunk of markdown-like post to a text editor (like sublime text on my desktop).
This conversion was not perfect however - I noticed some by-products. such as...
lots of carriage return (i.e. new line) disappeared - causing multiple lines got "merged" into one line. I had to manually spot for these lines and re-format them one-by-one. (a pain!)
I noticed also things like #include appeared as # include (added space in the middle). So I had to manually correct those. Likewise for some other entities containing #.
To manually edit the old (now semi-markdown) post, I removed all the legacy syntax-highlighter open tag [code language="cpp"] to three back-tick plus the code extension (```.cpp). And the close tag [/code] to three back-tick (```). See the Jetpack Markdown Doc and Markdown Extra Doc for more info.
Once updated post with the new Jetpack markdown syntax, the syntax-highlighter-evolved seemed to "know" about these new tag and automatically apply c++ color coding to it. (if I use three back-tick without the code extension, the syntax-highlighter still work to wrap the code into a block, just without the color).
Net net. The good news is that I have found a workaround which will enable me to "upgrade" the post one-by-one, manually (and a way to recover old posts - i.e. no more unexpected HTML tags in code by disabling the wordpress visual editor). Downside: this will be a lengthy process as I will have to manually spot for the missing carriage-return and re-add them to the code block. Updating 100 posts like this will take... some time.
Realized that the WP-plugin actually corrupt the original blog post files. So as a quick fix I manually edited the 100 posts using the editor, and replaced all the damaged code with the corrected version. Took me 3 days solid to do but at least corrected.
I noticed that the Jetpack Markdown Plugin and/or the Syntax Highliter Evolved are not perfected. e.g. even wraping a code with the opening and closing code tags, some bugs remained - such as backslashes got stripped, the less-than / greater than signs not displayed as expected, etc.
So I for creating new posts, I have tried out the (Github) Gist in conjunction with oEmbed Gist plugins (as suggested by @OllieJones below). Works beautifully so far (Gist seem to display codes as expected. Time will tell). I have this feeling that going forward I can use Gist to store all of my blog posts in markdown files, and simply use Wordpress to "display" these markdown files. (I wonder if Gist can be used to store the image files as well? Or I need to stick to Wordpress to store the image files?).
Here are some sample new blog posts using the Gist method. example1, example2.
The doggone markdown plugin translates posts from HTML to markdown when it loads them for editing, and translates them back when you Update them. I've had the same problem with code getting trashed. This is a big pain. (I fixed it with a backup.)
My solution is to use gists -- on http://gist.github.com/ -- to display my code. The oEmbed Gist plugin makes that work very well.