F# source code structural colorizer available

Last week I mentioned the editor extension I am working on, and now it’s available for you to try out!  You can obtain the F# Depth Colorizer from the Visual Studio Gallery.  It’s a one-click install; once installed you’ll see it listed when you bring up the “Tools\Extension Manager” menu in Visual Studio:

Once installed, the structure of your code will be highlighted in the editor, like this

or like this

rather than plain old code like this

Get the idea?  As suggested by the first two screenshots, the colors are configurable.  A good UI for configuring the colors was beyond me, so the colors are configurable via a registry setting.  (EDIT: see also here) If you don’t have the registry entry, you get the “greyscale” colors from the first screenshot by default.  Those greyscale colors could be represented via the following registry entry:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\10.0\Text Editor\FSharpDepthColorizer]
"Depth0"="190,190,190,230,230,230"
"Depth1"="170,170,170,210,210,210"
"Depth2"="184,184,184,224,224,224"
"Depth3"="164,164,164,204,204,204"
"Depth4"="178,178,178,218,218,218"
"Depth5"="158,158,158,198,198,198"
"Depth6"="172,172,172,212,212,212"
"Depth7"="152,152,152,192,192,192"
"Depth8"="166,166,166,206,206,206"
"Depth9"="146,146,146,186,186,186"

Alternatively, the red-blue colors from the second screenshot are:

Windows Registry Editor Version 5.00

[HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\10.0\Text Editor\FSharpDepthColorizer]
"Depth0"="240,180,180,240,220,220"
"Depth1"="180,180,240,220,220,240"
"Depth2"="240,172,172,240,216,212"
"Depth3"="172,172,240,212,216,240"
"Depth4"="240,164,164,240,212,204"
"Depth5"="164,164,240,204,212,240"
"Depth6"="240,156,156,240,208,196"
"Depth7"="156,156,240,196,208,240"
"Depth8"="240,148,148,240,204,188"
"Depth9"="148,148,240,188,204,240"

and more generally, the extension will look for the those registry keys.  (You can save these registry examples to a file “foo.reg” and then run the “foo.reg” file to install those keys, or use the “regedit” tool to inspect/change the values.  Be careful when modifying your registry!)

The DepthN values are strings of six numbers, representing two sets of RGB values, e.g.

DepthN = R1, G1, B1, R2, G2, B2

where N is the depth of the nesting of the source code structure, the RGB1 values are the color of the left edge of the highlight (intention is to provide more visual contrast at the edge), and the RGB2 values are the main color for highlighting that nesting depth.  There must be 10 depths, if you go deeper, the tool cycles around:

where the colors are getting darker until it’s gone 10 deep and cycles back around to using the lightest pink color from that color set.

I’ll publish the source code for this VSIX extension soon. (EDIT: It’s posted, see here.)   For now, I’d encourage you to try it out; you can leave feedback on my blog or on the gallery.  Enjoy!

(Much thanks to Noah who helped me write the editor portion of the extension.  Thanks to many people who did beta testing and offered useful feedback.)