Syntaxhighlighter is a cool JS library for syntax highlighting on a web page.
- Download the latest version
- Unrar to a temp folder. ex: c:\temp\syntaxhighlighter
- Transfer the folders (Scripts and Styles) to a web server. I use google code to host my files.
- Open blogger.com and sign in.
- Goto "Template" and choose "Classic" layout.
- Goto Edit Html.
- After <head> insert the following:
<link href="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Styles/SyntaxHighlighter.css" type="text/css" rel="stylesheet" /></link> <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shCore.js"></script> <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushCSharp.js"></script> <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushXml.js"></script> <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushCss.js"></script> <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushJScript.js"></script> <script language="javascript" src="http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/shBrushSql.js"></script>
- And before </body> insert:
<script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = 'http://mortenlyhr.googlecode.com/svn/trunk/SyntaxHighlighter/Scripts/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>
17 comments:
cool, thank's for the tip
there is a small syntax error in link tag. its cloded twice. Blogger doesnt save it so. Ty for the script.
Wouldn't be better to upload the scripts on your Google PageCreator's space? It seems better to me than a svn trunk.
Bye
Thank you, this was just what I needed to get things working at my .NET blog (http://mctscertification.blogspot.com/)
I had everything except the highlight all function before the closing body tag.
Many thanks!
don't work become this error
Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "head" must be terminated by the matching end-tag "".
As dixus said, there is na error in the link tag. Just take out the </link> and Blogger will save it.
Thanks Morten, syntax highlighting FTW!!
If you host the CSS file at Google Code it will not be accepted by Firefox. A simple solution in to embbed the stylesheet into your Blogger template.
I can't write code html in blogger with syntax high light
Tag is not allowed: <link href="http://YOUR HOST URL/SyntaxHighlighter.css" rel="stylesheet" type="text/css">
The code is not working for me. It has saved successfully after deleting the link tag. Please Check, http://freeexamples.blogspot.com/
can you tell me what am I doing wrong?
I did everything you said but it doesnt give the same result!
:(
http://alisteroz.blogspot.com
It doesn't seem to work for me.
heres my tutorial about how to implement a syntax hilighter on blogger really easily
here ist a tool wich does this all for you click
link was broken new link
have a look at this:
http://practician.blogspot.com/2010/07/color-my-world-syntax-highlighter.html
I would like to recommend a syntax highlighter for Blogger that does not use Javascript..Thanks for this post..very useful.
Post a Comment