I <3 Steve McConnell*
Coding Horror
programming and human factors
by Jeff Atwood

February 16, 2006

Colorization Required

Black and white works fine when I'm reading newspapers. But when I'm reading computer languages of any kind-- from Perl to SQL, from C# to Regular Expressions, from HTML to XML -- I can't bear to read them in black and white any more.

Consider this Infocard XML as you'd see it in a basic Notepad style text editor, perhaps with a little line numbering:

Infocard XML

It's just a slew of angle bracket noise that makes my brain hurt. But if view the same file in an editor that can colorize the XML..

Colorized Infocard XML

.. all of a sudden we can clearly see what's going on.

Plain old Notepad is perfectly adequate for reading text files. But if you're reading code or markup of any kind, Notepad doesn't work very well. We need colorization to truly understand what we're looking at.

Why is that? Are we just spoiled?

Posted by Jeff Atwood    View blog reactions
« The Real Cost of Hello World
Choosing between .NET Pepsi and .NET Coke »
Comments

I think you are spoiled Jeff. :)

Somehow I of cause agree with you, I code visual studio allmost every day and it shows almost the same coloured output.

BUT when I looked through your two examples above, I am not too sure about the colored one is more easy too read. I have the following thoughts..

mono example:

The clean black and white "minimalistic" output is way more easy on my eyes. I have a little defficult see what is begin and end tags, but it is just plain tekst, no noise and fuzz. As you said, I read/write a newspaper.


coloured exampled:
Alot of different colours, I can see the colours explain something. But are they really showing what is important to me? What my eyes first see is the blue colour and it sees the xml namespace ? .. I dont change that very often .. the attribute ( mimetype ), but I dont change that. I can click on url's ? But why do I want to do that, I am probably editing/reading an xml file.

Why make everything so pretty and cofusing? What would improve the reading for me would be setting the tab posistions and show the structure for me. Where does the xml node start and where does it end. Is the xml valid?

Give me intelisence and document outlining tools before/instead of the colours.

Peter Palludan on February 17, 2006 6:03 AM

i think it comes from what the experts from the brain research (don't know exactly what it's called in english) call the 2 types of analyzing data from your eyes.

you have 2 main types of analyzing graphical input:

- serial:

you must concentrate on whats in front of your eyes to tell differences on elements.
just think about the xml document. you cannot tell on first sight whats just text and whats an element name.

but if for example all strings have color a and all elements the color b you can quickly scan the whole document for the structure of the elements.

furthermore like the example above urls are underlined and you can immediately tell there are 3 urls in this document (the other 2 urls in this example are colored as normal strings and cannot be processed serial).

- parallel:

you can tell on first sight what kinds of elements are in front of you. think of a paper full of geometric forms. 5 squares and 1 triangle. you can immediately tell where the "other" geometric form lies.

sorry for typos and such :-)

hacktick on February 17, 2006 6:08 AM

Well I think you hit the nail on the head when you mentioned angle bracket noise. If the data was marked up differently, for easier human consumption for instance, it becomes a little easier to read:

InfoCard

Card ID: http://www.xyz.com/CardId/asd7879das78
Card Name: XYZ Membership card.

and so on..

Colorization would still obviously help because it is adding a sort of metadata about what we're looking at.

Richard Chamberlain on February 17, 2006 6:10 AM

One of the reasons I can't live without Resharper anymore is the way it colours member variables differenly to locals. Neatly does away with all those annoying "this.var" and "m_var" conventions without sacrificing clarity.

David Chapman on February 17, 2006 6:59 AM

Only indentation could have made either of those XML docs readable.

Joost on February 17, 2006 7:11 AM

My favorite coloring customization consists in using a light gray background for comments (text color remains black).
This simple thing dramatically boosts the readability of the code IMO: It makes an obvious distinction between comments and code. Browsing through the code by reading comments becomes really easy.

Serge Wautier on February 17, 2006 7:23 AM

Agreed with Joost : when reading a XML file, indentation is more important than colour.

And I prefer jEdit's way of colouring XML : tags are blue, content black, and attribute content pink. In the second screenshot, I think that there's too little difference between black (content) and dark-red (tags).

FlorentG on February 17, 2006 7:59 AM

Our brains seem to aggregate things that are alike thus giving us the ability to group things and grasp them quicker.

I agree with David Chapman - wouldn't/couldn't code without Resharper in VS. I use <a href="http://www.flos-freeware.ch/notepad2.html">Notepad2 </a> for similar reasons.

David O'Hara on February 17, 2006 8:00 AM

Yes you are spoiled.
But I do find XSL somewhat hard to read especially if it isn't indented. And unfortunately I usually edit it in notepad, wordpad, or gvim.

Will Rickards on February 17, 2006 10:21 AM

In addition to color, how about some whitespace? I found that XML chunk hard to read without some 4-space tabs to show the different levels of indentation. The hierarchical nature of XML is much easier to grok with a little ...

white

space.

Scott Stanfield on February 17, 2006 10:28 AM

FYI. I have been using a similar prog for a while now called Notepad2. It does the same type of things plus a number of other advanced features.

James on February 17, 2006 11:22 AM

That's because the colorization breaks up the code into patterns that we can quickly recognize. Because we've learned to attibute behavior to specific colors in code/xml, it makes it easier to pick out the pieces within a block of text.

Now, imagine a colorization bug in that code, that would totally throw your perception of what that code/xml did.

Pedro Silva on February 17, 2006 11:48 AM

It's all about making Notepad2 be your default text editor.

Haacked on February 17, 2006 12:17 PM

Color coding really is a must have when working with code files. That's why anytime I publish any code snippits to the web, I'm always sure to colorize it with GeSHi (http://qbnz.com/highlighter/).

It just makes it easier for everyone to read.

Know of any other good online syntax highlighters?

Ryan on February 17, 2006 12:18 PM

How 'bout VB.NET to regular expressions? No mention of VB anymore? Guess that's what happens when you leave the ghetto ey?

http://www.codinghorror.com/blog/archives/000105.html

VBMan on February 17, 2006 12:36 PM

I not sure if we need colorization to understand what we are looking at, but I would say we definately need logical grouping. For example, take this:

jonraynor

Now this...

JonRaynor

and finally this...

Jon Raynor

As the text is grouped, we can understand it faster and the meaning is more clearly understood. Colors definately help group the text in a more meaningful pattern.

Another item this illustrates is writing code with clarity.

Example:

This is OK,

if x then
dothetimewarp()
end if

But this is clearer with the the use of whitespace and further grouping of the expression...

if (x=1) then
dothetimewarp()
end if

Jon Raynor on February 17, 2006 1:46 PM

I have enjoyed a program called Notepad++, it's free. I'm going to compare it with Notepad2 and report back.

Daniel Pritchett on February 17, 2006 2:25 PM

Notepad++ has a tabbed MDI and Notepad2 doesn't. That makes me want to stick with Notepad++ right away, but I suppose I can deal with Notepad2 having multiple windows floating around...

Daniel Pritchett on February 17, 2006 2:28 PM

you just need Notepad2

Eber Irigoyen on February 17, 2006 3:05 PM

> I found that XML chunk hard to read without some 4-space tabs to show the different levels of indentation.

Of course, but this entry was about color considered alone, independent of other factors. Better whitespace and layout is a constant.

> It's all about making Notepad2 be your default text editor.

I agree, but colorization isn't a high priority for Notepad's future development. We'd be lucky to get the basics like a *toolbar*, much less an advanced feature like colorization.

And colorization is no help at all for reading plain text files. Which is what a typical Joe Six-Pack user would be doing with it-- and even that would be rare.

Jeff Atwood on February 17, 2006 4:32 PM

Instead of the color, the first thing I noticed about your colored image was that the quotation-mark characters had changed. (Although in illustration of your point, I suppose it was the colorization that allowed the incorrect characters to stand out from the rest of the text.) Did your colorizing program actually change them to the wrong characters, or does the font you use just have an inappropriate glyph?

Are you aware of any syntax-highlighting editors that allow separate colors for the namespace and the element or attribute names? As I look at your example, I lose track of the element names in a sea of maroon. I think a distinguishing color for the namespace prefixes might alleviate that problem.

Rob Kennedy on February 17, 2006 6:12 PM

Jeff, NotePad2 is not a wished-for upgrade to MS NotePad. It is a separate program written as a replacement for NotePad:

http://www.flos-freeware.ch/notepad2.html

Todd on February 17, 2006 6:58 PM

I second Notepad2, I couldn't function without it. I even created a U3 version so it's on my flash drive anywhere I go (download it from <a href="http://portableapps.blogspot.com/2006/01/notepad2-programmers-best-friend.html">http://portableapps.blogspot.com/2006/01/notepad2-programmers-best-friend.html</a> )

Slaven on February 17, 2006 7:21 PM

Yes, I know about Notepad2. I like it, but it has problems with largeish files (due to the Scintilla colorization engine), which is why I use EditPad Pro:

http://www.codinghorror.com/blog/archives/000229.html

Jan is about to release EditPad Pro 6, which I've been beta testing. Massive improvements all around, including doing the colorization on a seperate thread for better performance.

Jeff Atwood on February 17, 2006 8:21 PM

Hm, I've never seen (much less tasted) Yoo-hoo in Europe, so the seemingly irrelevant question I must ask: is Yoo-hoo better than Coke and/or Pepsi?

Joost on February 17, 2006 8:51 PM

As for an online code formatter, I like this one: http://www.manoli.net/csharpformat/

Handles htmlxml,aspx,t-sql,msh, vb, c#

Haacked on February 17, 2006 8:57 PM

I look at it in terms of dimensions. Black Text only shows ONE dimension. Colored Text literally adds another dimension of information...it's a new axis. Very Tufte.

Scott Hanselman on February 18, 2006 2:30 AM

FrontPage 95 did this ... couldn't tell you if there were programs that did this earlier than that, but I always thought it was genius. It made fixing that mangled, screwed-up HTML so much easier. 0.o

Ghosty on February 18, 2006 10:59 AM

its not so much that the eye/brain groups similarity, just that its really really good at spotting differences.

Gary Boodhoo on February 19, 2006 1:30 AM

Scott Hanselman wrote:

[...] Colored Text literally adds another dimension of information...it's a new axis. Very Tufte.

I'm glad someone brought Tufte into this discussion. While I find that color aids in understanding, most IDEs and syntax-coloring programs seem to default to some truly garish color schemes. If you read Tufte's "Envisioning Information" ( <a href="http://www.edwardtufte.com/tufte/books_ei">http://www.edwardtufte.com/tufte/books_ei</a> ), you'll probably (hopefully!) never look at information presentation the same way again.

Take the example InfoCard coloration in this blog: To me, the red attribute names and blue attribute values indicate importance. More than likely, however, the attributes are *less* important than the content of the elements. That said, a generic XML syntax-colorer doesn't have the advantage of knowing the semantics of the XML it's formatting, so I guess I shouldn't be too hard on it.

Also, deciding that color X implies meaning Y is a very subjective and personal thing. But I still wish that color-coding applications didn't routinely aim for the highest-contrast color schemes possible.

Jared Reisinger on March 2, 2006 4:00 AM






(no HTML)


Verification (needed to reduce spam):


Content (c) 2009 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved.