Getting highlighting with SyntaxHighlighter Evolved to work

By | May 17, 2015

I had some problem getting syntax highlighting to work correctly on this site. First, I tried using a combination of Jetpack Markdown and SyntaxHighlighter Evolved to write my posts. But when I previewed or published the post, several special character were turned into html code. For example, the less symbol < was rendered as &lt; instead. At one point it even corrupted my post, so that the html code was permanently saved into my Markdown text. Fortunately, WordPress allows you to go back to earlier revisions of your posts.

Google showed that the problem is not unknown, but I did not find a solution for my problem quickly. So I tried out WP Code Prettify instead. This worked but I didn’t like the look of it too much, so I experimented some more and finally got SyntaxHighlighter Evolved to work correctly.

Instead of using the triple backticks ``` I had to start the code block with the language specific command, e.g. cpp in square brackets for C++. Interestingly enough, just one code block in this form also caused all other original code blocks to render correctly, even though I had not changed them yet. I suppose it triggered some sort of different preprocessing of my post. Hopefully, this will be fixed in the future so that you can use more standard Markdown instead.

Maybe this will help someone with the same problem in the future? Anyway, it also showed me that I have to edit my code blocks so that you don’t need to use the scroll bar. Personally, I like to work with up to 100 characters per line instead of the usual 80, but this seems to be too many for the line to display in WordPress without scrolling.

An example

A C++ code block rendered with SyntaxHighlighter Evolved

A C++ code block rendered with SyntaxHighlighter Evolved

Leave a Reply

Your email address will not be published. Required fields are marked *