Code Syntax Highlight on Sharepoint 2007

So… I got fed of not having code syntax highlighting on our corporate sharepoint, and the solution we were using (copying code from Aptana and pasting it as rich text) is awful. You end up with hundreds of pointless font-face and font-color tags. terrible. nonsense. just awful.

So, the solution is to use some JS Code Syntax Highlighter (nope, no server components access). Here I expose the steps taken and the result (that is awesome).

First things first: Find your master on Sharepoint Designer

Well, if you don’t know what’s Sharepoint Designer, there are some things that you can only do with that. Download Sharepoint Designer 2007 (or a version for your sharepoint) and run it. Then open your sharepoint site on it. Your master (the file that gets included on every page) is located at /_catalogs/masterpage/default.master.

Sharepoint Designer 2007 File Manager

The KISS of Version Control

Save a copy of default.master, just in case. You never need that until you need that…

Which syntax coloring script should I use?

Yes, I’ve done that question… and googled it as well, checked out some options, ended up with Alex Gorbatchev’s Syntax Highlighter (is he related to Mikhail Gorbachev? Have no idea…).

A couple files are needed:

  • shCore.js
  • shBrushJScript.js
  • shCore.css
  • shThemeDefault.css

I added another dark theme, RDark.

Concat, minify, upload to SP server

There’s a way to use Alex’s CDN, but I wouldn’t advise that for 2 reasons:

  • You’d be increasing his traffic bill
  • If his server is down, your intranet would be down
So, I got the CSS files and went to htmlcompressor.com, dragged the files to the compressor, created a new css file on sharepoint (/css/syntax.css) and pasted the minified CSS onto it.
Then, the same with JS, but with a couple different settings:
  • Google Closure Compiler (v1810)
  • Single line output
  • Did not use JSMin as failback engine (Closure is more strict to errors than JSMin)
  • Added a comment onto this file with a link to Author’s website (future reference)
Created a new JS file on SP (/js/syntax.js) and pasted the minified thing to it.
Finally, edit default.master
Then, I’ve checked to see if I had done a backup for the master and added the following code to the HEAD tag:

(Of course I’m omitting server and company data here)

Then, I just had to erase all the junk html to a cleaner version, using the <pre class=”brush:js”> approach. This is the final result:

JS Coding Standards from Douglas Crockford on Intranet’s Sharepoint Site, proper syntax and RDark theme (cuz we like to code on dark bg, don’t we?

Well, I’m much happier now :)

Also read...