** Update: Aug 22nd, 2015 – I’ve recently moved this site to WordPress.com which includes native support for the SyntaxHighlighter plugin, but not the ability to add additional brushes. As a result, the samples below may not display exactly as they would in Typepad. **

In a recent post and really in a lot of my posts, I’m presenting code samples. Typepad lacks a nice ‘Insert Code’ button in its WYSIWYG editor, so I’ve been using indents and italics to offset code from the rest of the text. Not ideal since its not easily read, doesn’t wrap well, and is hard to copy and paste.

A quick Google of the Interweb located a nice tutorial on adding Syntax Highlighter to Typepad. However, in looking at the list of default ‘brushes’ available I saw the usual suspects (ie Javascript, CSS, Perl) but not Apex or VisualForce.

But I’ve seen this on the Saleforce Developer Wiki, so I poked around in View Source and Voilà! Looks like Salesforce has a custom brush and style for Syntax Highlighter.

• http://wiki.developerforce.com/skins/adnskin/CodeHighlighter/scripts/shBrushVisualForce.js
• http://wiki.developerforce.com//skins/adnskin/CodeHighlighter/styles/shThemeApexVf.css

I don’t have the Pro ver$ion of Typepad and couldn’t add the JS and CSS directly to a custom template. So, I followed the steps of the tutorial above to add a custom component with the necessary HTML. Here’s a step by step with a few more details specific to the VF/Apex theme.

Download the Syntax Highlighter. Then in the Typepad Library, create a folder called syntaxhighlighter and two subfolders; scripts and styles.

Upload Script Files -There are a bunch of JS files in the Syntax Highlighter download; each of the type of codes you want to display (ie Javascript, Perl, CSS). At a minimum you need shCore.js and one other. Upload that to the scripts directory along with shBrushVisualForce.js and any others you desire.

 

Upload Style Files – Again there are a bunch of CSS files here each for a different theme. I like the default theme so I only added shCore.css, shThemeDefault.css, and the custom theme shThemeApexVF.css.

In Typepad, navigate to your blog (if you have several you’ll have to repeat this process for each). Click the Design tab at top, and then the Content tab on the left.

Select the Embed your own HTML module and click the Add button.

Name your component Syntax Highlighter or something like that. The name won’t appear on your site. Copy and paste the following, replacing http://www.YOURWEBSITE.com with your website’s name. (If I have to explain this further, you probably shouldn’t be posting code on your site.)

<!-- Include required JS files -->
<script src="http://www.YOURWEBSITE.com/syntaxhighlighter/scripts/shCore.js" type="text/javascript"></script>
<script src="http://www.YOURWEBSITE.com/syntaxhighlighter/scripts/shBrushVisualForce.js" type="text/javascript"></script>
<!-- Include *at least* the core style and default theme -->
<link href="http://www.YOURWEBSITE.com/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css">
<link href="http://www.YOURWEBSITE.com/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css">
<link href="http://www.YOURWEBSITE.com/syntaxhighlighter/styles/shThemeApexVf.css" rel="stylesheet" type="text/css">
<!-- Important options, and finally the main call -->
<script type="text/javascript">
 SyntaxHighlighter.config.tagName = "code" // use <code> tags
 SyntaxHighlighter.config.stripBrs = true // disregard trailing 
 SyntaxHighlighter.all()
</script>

Click Save Changes at the bottom and you’re done.

Now to test your work, start a new post.

Click the HTML tab on the WYSIWG. And then cut and past the following.

<code class="brush: VisualForce">
<apex:page standardcontroller="Account">
  <apex:outputfield value="{!Account.Name}"></apex:outputfield>
  <apex:outputfield value="{!Account.OwnerId}"></apex:outputfield>
</apex:page>
</code>

Click Preview and you should see a nicely formatted code like below.

<apex:page standardcontroller="Account">
  <apex:outputfield value="{!Account.Name}"></apex:outputfield>
  <apex:outputfield value="{!Account.OwnerId}"></apex:outputfield>
</apex:page>

I’ve noted a few odd behaviors. First off, Typepad is inserting <![CDATA[ into the code when I flip from HTML to Rich Text view after pasting in some code with the javascript brush class.

Secondly, the Highlighter doesn’t seem to like self closed tags and inserts the closing tag, though incorrectly. This happens even with the Plain text brush. For example;

<apex:page StandardController=”Account”>
<apex:outputLabel value=”{!$ObjectType.Opportunity.fields.Amount.label}” for=”Amount”/>
<apex:outputField value=”{!Account.Name}”/>
</apex:page>

gets replaced with …

<apex:page standardcontroller="Account">
  <apex:outputlabel value="{!$ObjectType.Account.fields.Name.label}" for="AcctName">
  <apex:outputfield value="{!Account.Name}" id="AcctName">
</apex:outputfield></apex:outputlabel></apex:page>

Also, the code doesn’t always appear in the Rich Text editor though it is still there and visible in HTML view.

So while not ideal, but I can live with it these idiosyncrasies for now as I get more familiar with the tool. Just be sure to adjust your post workflow to paste code in HTML mode last (and not flipping back to Rich Text) and previewing the code to check for any odd replacements.

Hope you find this helpful.