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…
122 123 124 125 126 127 128 | #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