WP-Syntax Makes Syntax Highlighting a Snap
I’ve just transitioned my wordpress instalation over to using WP-Syntax. According to the plugin homepage:
WP-Syntax provides clean syntax highlighting using GeSHi — supporting a wide range of popular languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.
Like most WordPress plugins, WP-Syntax simply requires a download, an upload into the plugins folder, and then an activation. Once you’ve done all that, you can include code into your blog posts really easily. Just type:
<pre lang="objc" line="1">
[foo bar];
if([bar foo]) {
return 2;
}
else {
return 3;Then put </pre> at the end of your highlighted code. The plugin will take care of the rest and will color the code to looks like this:
1 2 3 4 5 6 7 | [foo bar]; if([bar foo]) { return 2; } else { return 3; } |
Make sure to look at the Readme file and look at their supplemental CSS. You just add that little snippet of styling to make the code look even nicer (the gray box and the blue background for the line numbers). I’ve posted the CSS here for easy access:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .wp_syntax { color: #100; background-color: #f9f9f9; border: 1px solid silver; margin: 0 0 1.5em 0; overflow: auto; } /* IE FIX */ .wp_syntax { overflow-x: auto; overflow-y: hidden; padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 15 : 0); width: 100%; } .wp_syntax table { border-collapse: collapse; } .wp_syntax div, .wp_syntax td { vertical-align: top; padding: 2px 4px; } .wp_syntax .line_numbers { text-align: right; background-color: #def; color: gray; overflow: visible; } /* potential overrides for other styles */ .wp_syntax pre { margin: 0; width: auto; float: none; clear: none; overflow: visible; } |
This plugin really accomplishes the job of syntax highlighting in the most simplistic and cleanest way I’ve seen. It utilizes GeSHi, so lots of languages are supported including HTML and CSS and PHP. It even takes into account long lines of code, and creates a scrolling inline box for your blog post. I couldn’t be happier. Check it out and let me know if you have found any better solutions.
-
Ryan McGeary
-
theY4Kman



