Jay Harris is Cpt. LoadTest

a .net developers blog on improving user experience of humans and coders
Home | About | Speaking | Contact | Archives | RSS
 
Filed under: Blogging | JavaScript | Programming | Reviews | Tools

Google Syntax Highlighter is a simple tool that allows bloggers to easily display code in a format that is familiar end users. The tool renders the code in a very consumable fashion that includes colored syntax highlighting, line highlighting, and line numbers.

/*
This is an example of how Google
Syntax Highlighter can highlight and display syntax
to you, the end user
*/
public void HelloWorld()
{
  // I have some comments
  Console.WriteLine("Hello, World!");
}

It is purely a client-side tool, as all of the processing is done strictly within the browser through JavaScript. There is no server-side processing. Since it is all JavaScript, you don't need special Copy/Paste plugins and macros installed to your favorite IDE or your blog authoring tool. (I am leery of random plugins and installing them into the software that I use to feed my family.) To including code in your blog post, copy your code from Visual Studio, Notepad, Flash, Firebug, or any tool that displays text, and paste it in to your post. As of v1.5.1, Google Syntax Highlighter supports C, C++, C#, CSS, Delphi, HTML, Java, JavaScript, PHP, Pascal, Python, Ruby, SQL, VB, VB.NET, XML, XSLT, and all of this is just what comes out of the box.

Setting Up Syntax Highlighter

To get Syntax Highlighter running on your blog, download the latest version of the RAR archive and extract the code. The archive contains a parent folder, dp.SyntaxHighlighter, with three child folders:

dp.SyntaxHighlighter
  \Scripts         //Production-ready (Compressed) scripts
  \Styles          //CSS
  \Uncompressed    //Human-readable (Uncompressed/Debug) scripts

Once the archive is extracted, upload dp.SyntaxHighlighter to your blog. Feel free to rename the folder if you like, though I did not. It is not necessary to upload the Uncompressed folder and its files; they are best used for debugging or for viewing the code, as the files in the Scripts folder have been compressed to reduce bandwidth by having most of their whitespace removed.

After you have uploaded the files, you will need to add script and style references to your site's HTML. This is code is not for your posts, but rather for your blog template. In DasBlog, I place this code in the <HEAD> block of my homeTemplate.blogtemplate file. Remember to change the file paths to match the path to where you uploaded the code.

<link type="text/css" rel="stylesheet"
  href="dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="dp.SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () {
  dp.SyntaxHighlighter.ClipboardSwf = 'dp.SyntaxHighlighter/Scripts/clipboard.swf';
  dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

To make the tool most efficient, including minimizing the code download by the client browser, highlighting is only enabled for the languages that you specify. The highlighting rules for each language is available through a file referred to as a Brush. The code sample above enables only C# and XML/HTML by including the core file, shCore.js, the C# brush, shBrushCSharp.js and the XML/HTML brush, shBrushXml.js. A unique brush file is available for each of the supported languages, and only the core file is required. These brushes are located in your Scripts directory (the human-readable version is in the Uncompressed folder). Include only the brushes that you like; if you forgot a language brush, the code will still display on your page, but as unformatted text.

<!-- Unformatted HTML Code / No Brush -->
<p id="greeting">Hi, mom & dad!</p>
<!-- Formatted HTML Code -->
<p id="greeting">Hi, mom & dad!</p>

Making Syntax Highlighter Go

Now that the application is deployed to the site, how does it get applied to a post? Paste the code into the HTML view of your post, inside of a <PRE> tag. Create a name attribute on your tag with a value of code, and a class attribute set to the language and options you are using.

<pre name="code" class="c-sharp">
  public void HelloWorld()
  {
    Console.WriteLine("Hello, World!");
  }
</pre>

One catch is the code must be first made HTML-safe. All angle-brackets, <tag>, must be converted to their HTML equivalent, &lt;tag&gt;, as well as ampersands, & to &amp;. I also find it helpful if your code-indentation uses two-spaces, rather than tabs.

<!-- Pre-converted code -->
<p>Hi, mom & dad!</p>
<!-- Converted code -->
<pre name="code" class="html">
  &lt;p&gt;Hi, mom &amp; dad!&lt;/p&gt;
</pre>

The class attribute is made up of both language and option aliases. These aliases consist of one language followed by your desired options, all in a colon delimited list.

class="language[:option[:option[:option]]]"

The value of language is any of Syntax Highlighter's defined language aliases, such as c#, csharp, or c-sharp for C#, or rb, ruby, rails, or ror for Ruby. See: full list of available languages.

Options allow for such things as turning off the plain text / copy / about controls (nocontrols), turning off the line number gutter (nogutter), or specifying the number of the first line (firstline[n]). A JavaScript code block with no controls header, and starting the line numbering at 34 would have a class attribute value of class="js:nocontrols:linenumber[34]". See: full list of available options.

Extending Syntax Highlighter

Because Google Syntax Highlighter is entirely in JavaScript, you have access to all of the code. Edit it however you like to suit your needs. Additionally, brushes are very easy to create, and include little more than a list of a highlighted language's keywords in a string and an array of language aliases. Creating a brush for ActionScript or QBasic would not take much time. Language brushes exist in the wild for Perl, DOS Batch, and ColdFusion.

In a future post I plan on discussing Brush Creation in depth through creating a brush for ActionScript.

Comparing Syntax Highlighter to Others

I am a fan of this tool, though that should be obvious considering it is what I use on this blog. I like how readable the code is, how extendable it is, and how easy it is to use. I don't like its compatibility--or lack thereof--with RSS; since all of the work is done in JavaScript, and RSS doesn't do JavaScript, there is no syntax highlighting, numbers, or options within a feed, though the code formatting is still maintained. Other tools, like the CopySourceAsHtml plugin for Visual Studio or Insert Code Snippet for Windows Live Writer convert your code into formatted HTML, where all of the syntax highlighting is applied through HTML attributes and embedded CSS. Their methods are much easier than Syntax Highlighter, since there are no stylesheets or JavaScript files to include in your HTML, and you don't have to worry about making your code HTML-safe. Also, their method works in RSS feeds. However, there isn't the same level of control. Through Syntax Highlighter's extendibility, I can theme my code views, such as if I wanted them to look like my personal Visual Studio theme. Through Syntax Highlighter, I can also make changes at a later time, and those changes will immediately reflected in all past posts, whereas making modifications to the HTML/embedded CSS pattern is much more difficult.

Final Thoughts

I like CopySourceAsHtml in Visual Studio. I used it for years on this blog. But I code in more languages than VB.Net or C#, and the plugin isn't available within the Flash or LoadRunner IDE. I was also frustrated with pasting my code in, only to find that it was too wide for my blog theme's margins, and would have to go back to Visual Studio, change my line endings, and repeat the process. I'm sticking with Google Syntax Highlighter. It works for all of my languages (as soon as I finish writing my ActionScript brush), and when my line endings are too long, I simply change my HTML. And in my HTML, my code still looks like code, rather than a mess of embedded style. I have to sacrifice RSS formatting, but as a presentation developer that is very particular about his HTML, I am glad for the customization and control.

Monday, 24 November 2008 10:41:50 (Eastern Standard Time, UTC-05:00)  #    Comments [9] - Trackback

Filed under: Mush | Reviews

Last weekend was the wife’s birthday. She hates having 14 different remotes to control the entertainment center; none of the “universal” remotes that came with any single component are really universal. The Comcast PVR universal remote cannot change inputs on the receiver. The receiver’s universal remote cannot access the PVR functionality of the Comcast box. So, for her birthday I got her a Logitech Harmony Advanced Universal Remote for Xbox 360. She loved it—or at least, the idea—but it sucked, so we returned it the same day.

I have heard great things about the Harmony remotes. The Harmony 360 is just another choice in the product line, with a few modifications:

  • It controls the Xbox 360, out of the box
  • It contains Y, X, A, B buttons to ease use of the Xbox via the remote

The Harmony 360 is nearly identical to the Logitech Harmony 550, except for different colored display (green vs. blue), different color casing (Xbox White vs. Black / Grey), and a few button changes (Y, X, A, B replace the Info / Guide buttons, though Y is sub-labeled ‘Guide’ and B is sub-labeled ‘Info’).

This is, or was, my first experience with the Harmony remotes. I am not a fan of this remote. Most of my distaste lies from the programming / editing software for the remote that is installed to your computer.

The interface is unbelievably slow
After all, performance is important to me. The installed application (not a browser application) would regularly take 5+ seconds to switch between screens.

The “future proof” codes were incorrect
For my A/V Receiver, my Comcast PVR cable box, and for my TV, the codes were incorrect. Though it identified my receiver, a brand new Panasonic SA-XR57 released only a month ago, it didn’t even know the receiver had a DVR input. As the only other component-video-equipped input on my XR57 besides TV, I use it for my Xbox. The problem here is that the software forces you to choose an input for the Activities macros, after which you can specify additional custom commands. My “Play Xbox” activity macro included ‘Turn on the Receiver’, ‘Set the Receiver to TV Input’, then a custom ‘Set the Receiver to CustomInputDVRCommand’. A kludge. A hack. I’m not a fan.

The “smart help” wasn’t so smart
The remote comes complete with a Smart Help feature via a Help button right on the remote that assists you when things go wrong. Because of my incorrect codes, the remote would do things wrong, but the Help would retry in an infinite loop. “Is your TV on?” No. [Sends IR command] “Did this fix the problem?” No. “Is your TV on?” No. [Sends same IR command] “Did this fix the problem?” No. “Is your TV on?” …
It is quite annoying.

The remote went back into the box after 2 or 3 hours of trying to get it set up correctly. It was more hassle than the 14 other remotes. It was not worth $129.99. I am just going to save some cash, and pony up for a Pronto TSU7000. Touch screen, configure my own button layout using my own bitmaps (for the UI side of me), more programmable interface (for my Developer side of me), and a lot more control over how I want my remote to be.

Wednesday, 28 June 2006 09:03:56 (Eastern Daylight Time, UTC-04:00)  #    Comments [1] - Trackback

Filed under: Mush | Reviews | Xbox
If you haven’t bought an Xbox 360, yet, stop reading this and go buy one. Even if you do not play video games–I certainly don’t have much time to play them–then you still need one.

I finally convinced the wife a week ago. We picked one up from Best Buy with a copy of Need For Speed: Most Wanted. It is a great game, and I am quite addicted to it, but I’m more impressed with the non-game features.

Windows Media Connect 2.0. (Sell your CD player)

I have already disconnected my CD player. It is going in a box, and I will probably sell it at the neighborhood garage sale next weekend. All of my CDs were long ripped to MP3, so that they can be played on the computer or on the iPods. The only bad thing is the home stereo system has always been the best in the house, expectedly better than iPod headphones or the computer speakers. However, now all that has changed. The Xbox 360 will stream all of my music from my computer. I no longer have to pick 5 CDs and toss them into the player. I can just turn on the 360 (wirelessly, via the remote or controller) and play whatever music I want to play. I’m not even sure if I will ever even buy a CD, anymore, instead opting from some sort of digital media, like iTunes.

One of my favorite “Cool Features” with this is that you can play your MP3s while playing a game. You can replace the in-game music with tunes to fit your current mood, yet it does affect the other sound effects in the game (like the sound of the police car behind you in NFS: Most Wanted). Through the 360, you can also control the volume of the MP3s independently of the other game sounds.

iPod Friendly

I plugged in my iPod. They had a chat for a few seconds, and I was instantly able to play anything off my iPod, just as if I was playing through the iPod UI. There was no setup, no drivers, and (my favorite) no iTunes installation. The 360 just knew what it was, and that was that. It even uses the iPod name that you gave your unit for iTunes. So, in the 360 Dashboard, I have “Jay’s iPod” or “Amy’s iPod.” This was the system I used in the 2 or three days before I got my 360 on the network. Though it is really cool, I no longer needed it thanks to WMC2.0 and streaming MP3s from the computer, since all of my MP3s are on the computer.

It’s all Wireless!

This may seem small, but it is the feature to beat all other features: the unit is totally wireless. The controllers are wireless, and the controllers can turn on the unit. I no longer have wires running across my livingroom (well, I do when I play GameCube or PS2). And if I’m going to be playing the same game I just played, or if I want to play some tunes while I’m sitting on the couch reading a book, the controller can turn on the unit, so I can be lazy and never have to get off the couch.

Xbox Live Arcade

There are over a dozen (and growing) small, downloadable games you can buy from Xbox Live Arcade. My wife loves Hexic, a small Bejeweled-like game that came with the unit (I got the fully-loaded package), though it can be purchased on the Arcade. She is addicted to it. Soon I will also buy Bejeweled 2, Gauntlet (”Warrior needs food badly.”) and Joust. This feature was available on the original Xbox, though not as fluid. There are a bunch of cool Xbox-only games that I hope come over to the 360, soon, like Pacman.

As for the games:

Need For Speed: Most Wanted
I love this game. It is a mix of NFS: Hot Pursuit and NFS: Underground. I like this much better than either one. It has the city-based racing of NFS:U, without some of the street-racing types that I didn’t like, such as URL or street-X, and above all, drifting. The pursuit is much better than NFS:HP, as the cops are much smarter, and will tag-team you to box you in using 4 or 5 cars.

I did download the demo of Project Gotham Racing 3, and I liked NFS much better. PGR3 was too touchy for me.

The next games on the list to buy are Fight Night and Oblivion.

Sunday, 18 June 2006 09:24:18 (Eastern Daylight Time, UTC-04:00)  #    Comments [0] - Trackback

Filed under: Reviews | Tools

I’m finally catching up on some of the blogs that I haven’t checked out in a while. I came across an intriguing post (on 04 March 2006) by Daniel Grunwald on the #develop teamblog. It seems that he created a tool to analyze Subversion’s ‘Blame’ output to check the ‘Blame’ data from #develop repository and tell what percentage of the code was committed by each contributor. (Incidentally, he has contributed 27% of the application, according to the post’s screenshot.)

My analyzer program gets the person who committed each line of code. Additionally, it searches log messages for the term “patch by” and uses that name instead.

He admits that the tool may need some love, and that some of his parameters are hard-coded, but it may be worth a look. I’m curious to see the contribution stats on our LMS.

Additionally, it is coded in Boo. I’ve been meaning to check out Boo, and getting Daniel’s app working against our configuration might serve as a great introductory Boo task for me.

Saturday, 03 June 2006 10:05:29 (Eastern Daylight Time, UTC-04:00)  #    Comments [0] - Trackback

Filed under: Reviews

Yesterday I finally got one: A Microsoft Natural Ergonomic Keyboard 4000. During a lunch run with Dennis to BestBuy, I broke down and bought one for work. You can buy it from Amazon for US$49.99.

First thoughts:

Microsoft Natural Ergo Keyboard 4000

  • The extra keys are where they are supposed to be! Finally, a keyboard that is not mangled. The arrow keys are in an inverted T. The Insert/Delete keys are in a 3×2 configuration. You can finally sell that old Natural Pro that is turning green or yellow on your desk.
  • It is quiet. The keys do not click like many of the old Dell keyboards that we have lying around work.
  • It feels good. The shape and dimensions fit me nicely. However, it has been a while since I used a natural keyboard, so it will take a bit to get back in to the groove. In addition, the palm rest is padded!
  • I like the “Favorites” keys. There are 5 reprogrammable “Favorites” keys along the top. I set them do our different VS solutions.
  • Some of the buttons are stiff. They spacebar, particularly, is stiff. I am hoping that I just have to break it in.
  • No way to reprogram the “nipple.” The Zoom-slider, or “nipple” as we have come to call it, isn’t reprogrammable, yet. Right now, it zooms in apps like IE of Office. It would be much nicer if I could remap it to be a scroller. Someone needs to find a way!
  • The keyboard riser had to go. A riser that comes built on raises the front of they keyboard by an inch or so. I’m the guy who pops out the legs on the back of the keyboard to tilt it toward me, so this riser had to go right away. Luckily, it pops right off.

This is a nice keyboard. If my computer at home did not have a keyboard built in to it (or if I actually used my desktop), I would buy one for there, too. I hope that a future version of IntelliType Pro allows the nipple to be reprogrammed. Then this would be the perfect keyboard.

Friday, 24 February 2006 09:29:21 (Eastern Standard Time, UTC-05:00)  #    Comments [2] - Trackback

Filed under: Reviews | Testing | Tools

Screen Hunter 4.0 Free - www.wisdom-soft.com
Screen Capture Tool
Cost: Free

Quite possible the most essential task for any tester is taking a snapshot of the current screen to give their developer a visual representation of the logged error. The classic Windows hotkey, [Alt] + [PrtScn], will take a screen capture of the entire active window. However, sometimes the text on a link is spelled wrong, a button uses the wrong icon, or an error message displays in the wrong style; in these scenarios an entire screen grab is overkill and often confusing. Yet there are few things that a tester can do about that short of opening up MS Paint or Macromedia Fireworks and cropping the image, completely wasting valuable time and causing pointed comments from the Project Manager about diddling in Photoshop.

Screen Hunter 4.0 Free allows you to capture the important pixels quickly and effortlessly. Tap F6 (The default hotkey, but it can be modified), and your cursor changes to a cross-hair. Click-drag a box around whatever you want to capture, and it’s done. Instantly cropped screen capture for your bug-tracking pleasure.

The developers will be happier, too.

Wednesday, 11 May 2005 14:46:01 (Eastern Daylight Time, UTC-04:00)  #    Comments [1] - Trackback