Tom Clarkson is a SharePoint consultant and entrepreneur based in Sydney, Australia.

Contact Details

Links



Recent Searches



Archives




Past Posts







RSS Feed

Syntax Highlighting in a CKS:EBE blog

SharePoint 2007
Wednesday January 28 2009
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". 

	

<xsl:template match="/">
    <!-- <xmp><xsl:copy-of select="."/></xmp> -->

    <xsl:apply-templates select="rows/row"/>

 <xsl:text disable-output-escaping="yes">

    <![CDATA[

<link type="text/css" rel="stylesheet" href="/Scripts/SyntaxHighlighter.css"></link>

<script language="javascript" src="/Scripts/shCore.js"></script>

<script language="javascript" src="/Scripts/shBrushCSharp.js"></script>

<script language="javascript" src="/Scripts/shBrushJscript.js"></script>
<script language="javascript" src="/Scripts/shBrushCss.js"></script>
<script language="javascript" src="/Scripts/shBrushSql.js"></script>
<script language="javascript" src="/Scripts/shBrushXml.js"></script>
<script language="javascript">

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

]]>
</xsl:text>
</xsl:template>



3 Comments

Comments

On 06 Feb 2009 04:18, Peter Allen said: 
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
On 07 Feb 2009 02:38, Tom Clarkson said: 
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.
On 20 Jun 2009 04:45, tom daly said: 
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();}
    </script>

Leave a comment