I just installed a syntax highlighter tool here on Rhymes With Milk and am pretty excited about it so far. What it means is that I can paste snippets of code into WordPress’ post editor essentially verbatim, and a JavaScript function translates it into a nicely formatted version for the blog.
I had seen this sort of thing on other websites before, but only just realized that I might have a use for it, too. I wasn’t quite sure how to go about finding something like that, so I asked Twitter if it had any recommendations. True to form, Twitter offered me no help, so I started doing my own research. Finding the right set of keywords to search for one of these wasn’t easy, but I eventually stumbled onto Alex Gorbatchev’s webiste. It was exactly the one I was thinking of when I set out to find one.
After a super simple install (you just have to FTP the files to your server and add the right file calls in your header) and some custom styling, it was all ready to go. I did have a few problems personalizing it though.
toolbar functionality
The program has an optional little toolbar that pops-up when you hover over the syntax highlighter div with buttons for printing, copying, displaying as plain text in a pop-up, and a small “about” pop-up. I initially thought this toolbar could be pretty handy, but that some of the buttons could probably go—namely the print one. I hardly believe anybody is ever going to see my code examples, a small fraction of them are actually going to care about what they’re looking at, fewer would actually want to use it for reference, and none of them would want it physically represented so badly that there should be just a single button for them to accomplish that. But despite digging around in the core JavaScript file for quite a while, I wasn’t able to figure out how to selectively remove buttons. It looked like for me it was all-or-nothing.
I decided that I should go with “all” at this point mostly because of the copy button. The way the lines are displayed within the div make it so that when you manually highlight-and-copy, you also get stuck copying the line numbers. This little cumbersome detail made me think that having a single copy button that only grabs the relevant code would be convenient, but there’s some sort of XML file that the function looks for but could not find. Something like that. Again, digging around in the core files didn’t help me any, and unfortunately the official website has pretty poor documentation and troubleshooting help.
line wrap
The line wrap function, unlike the ones dictating the toolbar buttons, can simply be switched on or off with an appropriately placed “true” or “false” respectively. When turned on, lines wrap nicely (although no line wrap is generally all that nice when looking at code), expanding the height of its table row, pushing the following lines and line numbers down further. When wrap is turned off a scrollbar appears at the bottom. I almost prefer this method, but it doesn’t display everything beyond the edge of the box very nicely. For some reason, the lines alternating colors end at the edge of the box, and a solid background color is displayed beyond their right ends, and depending on the CSS, this color might not ever correspond to either of the line colors. Lame.
solution?
I found this guy who has created a modified version of the original syntax highlighter. His previous documentation claims that a few of the issues I mentioned above had been fixed, and a ton of extra (and helpful) functionality had been added. I downloaded it and started testing the different functions…and it fell short of the claims. For all that I could tell, I had downloaded the same damn thing as the original. And again, explanations on how to implement said added functionality was minimal. I gave up with it much quicker than I normally do with things mostly because the test html file that comes with the download (it’s meant to test whether the program works or not) was out of date. It was the test file for the previous release, not the most current. I couldn’t even use his own test file as reference on how to implement the various features. I can think of other ways to find reference, but I stopped there because even that kind of small oversight makes me lose faith in the developer.
Therefore, I stuck with the official release (not the mod) and just turned the toolbar off, and line wrap on.
I was going to leave you with a small C++ example since that’s the language I’m currently using the most, but it’s syntax mode is actually kind of lacking. So instead, how about we try doing a PHP program (which has much better syntax support) that uses the accumulation plan.
<?php
$myArray = array(12, 102, -44, 61, 0);
$total = 0;
for($i=0; $i<count($myArray); $i++)
{
$total += $myArray[$i];
}
echo 'The total amount in my array is ' . $total . '!';
?>
2 Comments »
