robinadr

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:

~~~ {.prettyprint .lang-php}
<?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:

~~~ {.prettyprint .lang-html}


## Conflicts with WordPress

If your theme makes use of it, WordPress adds classes to the `<body>` tag through the [`body_class()`][4] 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.

[4]: http://codex.wordpress.org/Function_Reference/body_class

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:

~~~ {.prettyprint .lang-css}
  /* a markup tag name */
  .tag {
    color: #f2777a;
  }

I changed it to this:

~~~ {.prettyprint .lang-css} / a markup tag name /

content pre .tag {

color: #f2777a;

}

5 Comments

  • You can use <pre class="brush: php"> with my plugin and it’ll work. Just check the box on the settings page to always load SyntaxHighlighter as normally my plugin only adds the JS/CSS when its shortcode is used.

    The problem however is that you need to escape all HTML tags within the pre code block, otherwise it will be rendered. The same issue applies to your current setup. Perhaps your Markdown plugin does it for you, I don’t know.

    Also of note is that a Markdown plugin is coming to Jetpack soon that will make use of my plugin (if installed) in order to render any Markdown-escaped code (three backticks).

    • I saw that on the SyntaxHighlighter website but that format still kind of bothers me because it hijacks the class attribute for that instead of just using something like .lang-php.

      I’m using Markdown Extra by Michel Fortin and it doesn’t seem to have any problems with HTML tags — they’re all escaped automatically within code blocks.

      I saw that in the comments on the WP.com announcement and I’m excited to see what’s coming. I’ve always liked the Github-flavored MD syntax for code blocks the most (the backticks). Do you know anything about when that will be available to the public?

  • worths mentioning the WP Code Prettify plugin, that takes care of loading the Google Prettify script, and allows plugging some custom CSS straight from the admin dashboard, instead of editing the theme.

    (disclaimer: I am not affiliated with that plugin. just someone who uses it.)

    • Thanks for the link. I’ve never liked how my solution loads the JS on every page (even for all the languages), and that plugin seems to take care of that issue.