I have been using SyntaxHighlighter Evolved to highlight code on here for a while, but it always had problems playing well with the Markdown plugin I use. I wanted to change to something that falls back gracefully, and doesn’t require any special markup outside of what Markdown can do.
I ended up using Google Code Prettify to highlight my code. It doesn’t use any weird markup (just adding a prettyprint class to the <code> block, and I can do all of it in Markdown. Here’s an example of a code block:
~~~ {.prettyprint .lang-php}
<?php
// Source code here
print( "some string" );
?>
~~~
The above Markdown ends up rendering like this:
<?php
// Source code here
print( "some string" );
?>
Because it doesn’t use any strange or custom tags (just a class on a <code> block), it will degrade gracefully into just a regular <pre> block without highlighting if the Prettify code disappears or isn’t working. To me, this is a much better solution than a [shortcode] like the ones that SyntaxHighlighter Evolved uses.
Here are the 2 lines of code that make it all work:
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js"></script>
<script>prettyPrint()</script>
Conflicts with WordPress
If your theme makes use of it, WordPress adds classes to the <body> tag through the body_class() template tag. Unfortunately, on some pages, these classes can sometimes conflict with the global styles used by the Prettify themes. For example, on my tag archive pages, the <body> tag had a class of tag, which is one of the classes Prettify uses to highlight code. The result was pink text everywhere on the page.
To fix this conflict, I edited my Prettify styles to change the scope of the styles to those classes within <pre> and <code> blocks. For example, this is the original style rule:
/* a markup tag name */
.tag {
color: #f2777a;
}
I changed it to this:
/* a markup tag name */
#content pre .tag {
color: #f2777a;
}