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.
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?
A couple files are needed:
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
- 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)
<!-- added by mauricio_wolff@... - syntax hiliter usage: <pre class="brush: js|css|html">[ code ]</pre> -->
SyntaxHighlighter.defaults['toolbar'] = false;
<!-- /added by mauricio_wolff@... - syntax hiliter --></pre>
(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:
Well, I’m much happier now :)