Syntax coloring makes it much easier to read source code, especially when you become accustomed to a particular color scheme. For example, I’m used to the default color scheme in Visual Studio: comments are green, keywords are blue, string literals are red, etc. Once you get used to color-coded source code, it’s hard to go back to black-and-white. However, the code samples here are monochrome and I’ve been thinking about doing something about that.
It’s possible to mark up code samples on the web just like any other chuck of HTML, but that would be time-consuming. Also, you want to leave code samples as plain text so readers can copy the source and paste it into their code. So what people usually do is use client-side JavaScript to change the way code samples are displayed in the browser. That way the code appears to be marked up but it’s still unadorned underneath.
I like the way code samples look on Scott Hanselman’s blog, and so I started to use the JavaScript solution that he recommends, SyntaxHighlighter. However, I decided to hold off when I read this comment on his blog.
I tried to use it. Unfortunately the scrolling errors I see on your and other sites are too much to bear.
More recently I heard that StackOverflow is using prettify.js to add syntax coloring for their code samples. I haven’t noticed any problems on that site, so I’m starting to try out prettify. I’ve heard that the script doesn’t always handle VB code correctly, but that doesn’t matter to me.
The prettify script is easy to use. You don’t have to tell it what programming language you’re highlighting. However, you do have the option of specifying the language, which presumably can’t hurt. I’ve tried it on a page containing C++ code and on another page containing Python code and they both look OK. My only complaint is that the default color scheme is not what I would have chosen. However, the color scheme can be modified by editing a style sheet and I intend to do that.
I’m going to start by experimenting with static files on my site. I’m more cautious about incorporating syntax coloring with the blog since I don’t know what interaction problems there could be with the WordPress software on the server or with blog reader software on the clients. Scott Hanselman says on his blog
… I couldn’t find a syntax highlighting solution that worked in EVERY feed reader. There are lots of problems with online ones like Google Reader and BlogLines if I, as the publisher, try to get tricky with the CSS.
So I may leave the code samples on the blog alone. Also, I’m also not sure what I’ll do about PowerShell samples. The prettify script works well with C-family languages, but PowerShell syntax may be too far afield from what it expects.
Does anyone have suggestions in general? For PowerShell in particular?
Oh, let me count the ways. :)
Few ways to go about it. for complete scripts, I put in poshcode.org and use the embed script and it generate
http://poshcode.org/
I also use windows live writer a lot there is a nice plugin for doing various code embedding, I look for url
WLW Code Snippet plugin is nice: http://tinyurl.com/5eppdt
also, PowerShellPlus can copy as HTML or RTF
http://powershell.com
I looked at highlight. It seemed to be functional enough for my purposes. It’s well supported on Linux. I liked the Windows version. It has some nice features.
http://www.andre-simon.de/
There’s always GNU Source-highlight:
http://www.gnu.org/software/src-highlite/
And if you use KDE, the Kate editor has a nice ‘Export to HTML’ feature, and supports very many different languages. (And you can easily download support for new ones from within the program.)
Hal and Karl: Thanks for the suggestions. The tools you mention sound very useful. However, my preferred solution is not to produce formatted HTML and then paste it into my page. I’d rather the work be done in JavaScript that runs in the client’s browser so that the underlying HTML doesn’t change. That way people can copy and paste the code without having to edit it. Otherwise I’d need two copies of the code: one human-readable and another machine-readable.
John, I don’t think I understand. People can copy and paste the code directly whether the formatting is done by JavaScript or in advance (both ways of doing it changes the DOM in exactly the same way). While I understand that one might prefer to have formatting done automatically, without having to go through a separate tool, for the reader there is no difference (unless her or she is looking at the actual HTML source code, which there is no need for).
Karl, you’re right. I was confused.