Syntax Highlighting in a CKS:EBE blog

Today I finally got around to setting up a decent way of handling code blocks on my blog – some of my earlier code listings looked pretty awful if I didn’t put enough work into the formatting.

I’m now using SyntaxHighlighter from Google Code. It works well, but this being SharePoint there are a couple of details that make it more difficult to use.

First, SharePoint strips out a lot of html formatting as soon as you save a post. That includes the name attribute on the pre tag which is used to determine which block to format. Fortunately this is easy enough to fix by leaving the parameter off the call to HighlightAll.

Next there is getting the scripts to appear – and particularly getting the scripts to render client side and not be treated as part of the XSL. Since figuring out XSL syntax is never much fun, here’s the complete code added to Post.xsl. All the scripts are uploaded to a document library “Scripts”.


    <!--  -->

    

 

    <![CDATA[

dp.SyntaxHighlighter.ClipboardSwf = '/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll();

]]>

Like this:

Be the first to like this post.

Written by Tom Clarkson

January 28, 2009 at 8:39 am

Posted in SharePoint

3 Responses

Subscribe to comments with RSS.

I just found SyntaxHighlighter from Google Code and starting using it on my WSS site first on my examples area. This worked fine until I tried to use on my Blog.

I read your post and I do not believe that I have access to my post.xml. I have access to my post.aspx. Is there away to do this with out access my post.xml? Or how do I find my post.xml file?

Thanks,

Peter

Peter Allen

February 6, 2009 at 11:18 pm

Reply
If you’re using CKS:EBE, post.xml is in the Themes library.
e
If not, you should be able to add the same script tags to either a content editor web part or the aspx file. Adding the scripts to the master page would also be a good option.

Tom Clarkson

February 7, 2009 at 9:38 pm

Reply
This is very good info, i tried adding this to my CKS EBE 2.0 site and it would not work as posted above.

I had to add one thing to that last script tag section to make it execute on load.

window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = ‘http://blogs.bandrsolutions.com/thomasdaly/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll();}

tom daly

June 20, 2009 at 11:45 pm

Reply

Tom Clarkson