Custom CSS tags for displaying well-formed VBA code

April 27, 2008 – 2:07 am by JP

---

So you might be wondering, what does VBA have to do with a web technology like CSS? If you are like me and you hand-code your website, you might find it difficult to display VBA code properly. Unfortunately, I can’t seem to locate a copy of zHTML, and the other VBA-to-HTML converters I tried just don’t seem to satisfy.

Since my website is formatted using CSS, I did a bit of digging and found I could create my own HTML tags. I was already using the PRE and TEXTAREA tags to format snippets of VBA code, but this technique allows you to create custom tags that make it simple to roll your own webpages. So I went ahead and wrote some CSS to format the four most commonly posted types of VBA code: Normal, Selection, Comment and Keyword Text. Here it is:

.vba
{ color: #000000;
background: #FFFFFF;
padding: 10px 10px 10px 10px;
font-size: 100%
}
.selected
{ color: #FFFFFF;
background: #330099;
}
.comment
{ color: #339933;
background: #FFFFFF;
}
.keyword
{ color: #330099;
background: #FFFFFF;
}

Paste the above code into the .css file that defines your site’s layout. You can fiddle with the background color to make it suit your site better. Now you can wrap your VBA code in tags like this:

<pre class="vba">
<span class="keyword">Sub</span> fixformulas()
<span class="comment">'
' if you have some formulas with a ' or some other
' character in the beginning'</span>
<span class="keyword">Dim</span> cell<span class="keyword">As</span> Excel.Range
<span class="keyword">For Each</span> cell 
<span class="keyword">In </span> Selection
    cell = "=" & Right(cell, Len(cell) - 1)
<span class="keyword">Next</span> cell
<span class="keyword">End Sub</span>
</pre>

And it will display like this:

Sub fixformulas()
'
' if you have some formulas with a ' or some other 
' character in the beginning
'
Dim cell As  Excel.Range
For Each cell In Selection
    cell = "=" & Right(cell, Len(cell) - 1)
Next cell
End Sub

The PRE tag wraps the area in the “vba” tag, which is the default black-on-white text used to display most VBA code (if you haven’t fiddled with the default settings in the VBE). So any code that isn’t wrapped in a span tag will automatically take on the default color, which is the intuitive way the VBE does it.

Instead of using the deprecated FONT tags or trying to guess the hex values for colors every time you want to use them, you can use friendly words like “keyword” or “comment” in your SPAN tags and the code will be colored accordingly. The PRE tag will also make sure the code is indented properly!

Eventually I’ll convert all the existing code to this format, and all future code posted on the blog and the website will be displayed using these custom made CSS class tags.

(ps- the Outlook event code I promised last week is coming up in the next day or two. I was away this week so I have a lot of catching up to do.)

Enjoy,
JP

 Print This Post  |   Email This Post  |  Permalink  |   Subscribe now!

Filed Under: administrative
Tags: CSS, VBA

This post has 34 views since April 27, 2008 – 2:07 am.