Putting code in your Google Blog

We interrupt this Visualforce show-n-tell with a special announcement. One of my blog visitors, ELIT3, asked if I could post the code of my Visualforce pages, rather than screenshots. I tried to copy the code into the blog post, but when I viewed the posting, the code was all mangled. The browser had interpretted the Visualforce code as HTML, and disintegrated it.

I thought I could prevent that by just wrapping the code in <pre> </pre> tags, but that didn't seem to help. Today, I finally figured out that I need to wrap the code between some <code> </code> tags, but I still had to convert the "<", ">", other special characters.

I trolled around the web and found a couple sites to help with that, and thought I'd share. So if you're interested in posting code on your own blogs (and also for my own future reference, since I'm sure to forget), check these out!

My favorite is Elliot Swan's Postable site: http://www.elliotswan.com/postable/

I like the way it looks, and I love it's simplicity -- you just drop all your code into the text window:



Then, click the "Make it friendly" button. His browser app will replace all the "<", ">", and "&" symbols with the appropriate HTML translations.



Then, you simple wrap <code> </code> tags around your converted "HTML friendly" text, and wala! It's viewable in a Google Blog post (and can be copied by your readers!):


<!-- Alert Notification Wizard -->
<apex:page controller="SendAlertController">
<apex:sectionHeader title="Active Alert - Status Update" subtitle="Internal CPC Notification Only"/>
<apex:pageBlock >
This is an Internal (Cedar Point) <b>Sev {!Case.Priority} ALERT</b> Status Update for the <b>{!Account.Name}</b> Account Team.
</apex:PageBlock>
</apex:page>


Here's another site http://www.htmlconvert.net/ that goes one better, giving you an option to transform the text into standard HTML code with colorized tags:


<!-- Alert Notification Wizard -->
<apex:page controller="SendAlertController">
<apex:sectionHeader title="Active Alert - Status Update" subtitle="Internal CPC Notification Only"/>
<apex:pageBlock >
This is an Internal (Cedar Point) <b>Sev {!Case.Priority} ALERT</b> Status Update for the <b>{!Account.Name}</b> Account Team.
</apex:PageBlock>
</apex:page>

Cute!