If you’re a coder-type and have some sort of online presence, odds are you’re going to be publishing code in some form and may want to utilize some type of syntax highlighter. If you’re running some type of blogging platform, then you’ve likely got a number of plugins at you’re disposal.
But if you’re rolling your own landing page or are simply looking for another alternative for syntax highlighting, check out Snippet.
Snippet is a jQuery-based syntax highlighting plugin. Out-of-the-box, it supports 15 languages but can easily be extended to support others. It also offers a number of color schemes for displaying your code.
You can download a copy of the plugin at the Snippet website. Once done, it’s easy to get started.
Script and Styles
First, include the script and the style in the header of your page
[cc lang=”javascript”]
[/cc]
Code in the Pre
After that, make sure that all source code that you want to highlight is included in a pre tag. For purposes of leveraging jQuery’s selectors, it may be a good idea to provide a class name or an ID to easily reference in your JavaScript:
[cc lang=”html”]
$(function() { $('#container').text("Hello world!"); });
[/cc]
Highlight It
Finally, call the snippet plugin on the pre element(s) that contain your code. Note that you can select from a number of color schemes by passing additional arguments to the plugin.
[cc lang=”javascript”]
$(‘pre#source-example’).snippet(“javascript”); // for the default color scheme
$(‘pre#source-example’).snippet(“javascript”, { style: “greenlcd” }); // for selecting a color scheme
[/cc]
Not bad, huh? I wonder how long until someone wraps this into a WordPress plugin… đŸ™‚
Speak your mind...