WP-Syntax Code Highlighter Plugin

As a blog by and for web developers, many of the articles on DevSpot tackle some problem with HTML, JavaScript, or another markup/programming language. That means we frequently need to embed code snippets into our WordPress posts to help explain a solution. To make them easy to understand, code samples should be color coded and include line numbers for reference.

For WordPress blogs, that’s where the plugin WP-Syntax comes in. There are several to choose from (including the more powerful SyntaxHighlighter), but WP-Syntax the right combination of features and usability that we needed. It converts blocks of text wrapped with pre tags and a lang attribute into syntax-highlighted code.

Take the following CSS block wrapped with only the pre tags as an example…

#secondary h2.hello
{
    font-size: 2em;
    padding: 0 0 20px 0;
    text-indent: -9999px;
    background: url(/images/hello_world.gif) left top no-repeat;
}

Now simply wrap that same text with <pre lang="css" line="122"> and </pre> and the output is color coded and line numbers are added…

#secondary h2.hello
{
    font-size: 2em;
    padding: 0 0 20px 0;
    text-indent: -9999px;
    background: url(/images/hello_world.gif) left top no-repeat;
}

Voila! Just by adding the lang attribute (and optionally the line attribute) you’ve got a color coded, numbered code sample.

Link: WP-Syntax Plugin