I've been meaning to do this once and for all; documenting the proper way to include SyntaxHighlighter on a blogger-powered blog. This is what you need to do. (Adapted from http://morten.lyhr.dk/2007/12/how-to-get-syntax-highlighting-in.html and http://developertips.blogspot.com/2007/08/syntaxhighlighter-on-blogger.html, among others.)
- Download the syntaxhighlighter code
- Place the code somewhere public; it is meant to be accessed by your readers. I chose to start a new google code project and place it there.
- Go to blogger and navigate to the tab where you edit the template's HTML
- Add references to the syntaxhighlighter javascript files
<script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shCore.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushCSharp.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushCss.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushJScript.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushJava.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushPhp.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushPython.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushRuby.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushSql.js'/> <script language='javascript' src='http://your.host.com/syntaxhighlighter/Scripts/shBrushXml.js'/>
The important thing here is the reference to shCore.js. It also needs to be referenced before any other SyntaxHighlighter script. Add other references for the languages you'll need. The references should be added inside the <head> part of the template. - Add the contents of the file syntaxhighlighter.css to the styling in your template.
- At the bottom of your template, just above the </body> tag; add the following javascript. The script makes sure that any row breaks inside the highlighted code isn't converted to a <br /> tag
- Save the template and try it out. Chances are it doesn't, so make sure you have Firebug ready for action.
<!-- last thing: include the syntaxhighlighter javascript -->
<script class='javascript'>
//<![CDATA[
function FindTagsByName(container, name, Tag)
{
var elements = document.getElementsByTagName(Tag);
for (var i = 0; i < elements.length; i++)
{
if (elements[i].getAttribute("name") == name)
{
container.push(elements[i]);
}
}
}
var elements = [];
FindTagsByName(elements, "code", "pre");
FindTagsByName(elements, "code", "textarea");
for(var i=0; i < elements.length; i++) {
if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {
var childNode = elements[i].childNodes[0];
var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));
elements[i].replaceChild(newNode, childNode);
}
else if(elements[i].nodeName.toUpperCase() == "PRE") {
brs = elements[i].getElementsByTagName("br");
for(var j = 0, brLength = brs.length; j < brLength; j++) {
var newNode = document.createTextNode("\n");
elements[i].replaceChild(newNode, brs[0]);
}
}
}
//clipboard does not work well, no line breaks
// dp.SyntaxHighlighter.ClipboardSwf = "http://thomaslundstrom.googlecode.com/svn/trunk/syntaxhighlighter/Scripts/clipboard.swf";
dp.SyntaxHighlighter.HighlightAll("code");
//]]>
</script>
0 kommentarer:
Post a Comment