2007-12-12

How to get syntax highlighting in Blogger with SyntaxHighlighter

Syntaxhighlighter is a cool JS library for syntax highlighting on a web page.

  1. Download the latest version
  2. Unrar to a temp folder. ex: c:\temp\syntaxhighlighter
  3. Transfer the folders (Scripts and Styles) to a web server. I use google code to host my files.
  4. Open blogger.com and sign in.
  5. Goto "Template" and choose "Classic" layout.
  6. Goto Edit Html.
  7. 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>
  8. 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>
at

17 comments:

  1. botmonster23 December, 2007 19:12

    cool, thank's for the tip

    ReplyDelete
  2. Dixus08 February, 2008 11:20

    there is a small syntax error in link tag. its cloded twice. Blogger doesnt save it so. Ty for the script.

    ReplyDelete
  3. Pietro Bonanno14 February, 2008 18:36

    Wouldn't be better to upload the scripts on your Google PageCreator's space? It seems better to me than a svn trunk.

    Bye

    ReplyDelete
  4. wizkid19 March, 2008 08:14

    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!

    ReplyDelete
  5. Anonymous07 May, 2008 14:12

    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 "".

    ReplyDelete
  6. Daniel Quadros24 August, 2008 00:10

    As dixus said, there is na error in the link tag. Just take out the </link> and Blogger will save it.

    ReplyDelete
  7. Unknown25 August, 2008 03:44

    Thanks Morten, syntax highlighting FTW!!

    ReplyDelete
  8. Daniel Quadros27 August, 2008 03:23

    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.

    ReplyDelete
  9. Án Bình Trọng27 August, 2008 06:20

    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">

    ReplyDelete
  10. Moderator27 November, 2008 03:50

    The code is not working for me. It has saved successfully after deleting the link tag. Please Check, http://freeexamples.blogspot.com/

    ReplyDelete
  11. Alisteroz13 December, 2008 13:44

    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

    ReplyDelete
  12. rprateek07 January, 2009 07:30

    It doesn't seem to work for me.

    ReplyDelete
  13. Unknown22 January, 2010 05:01

    heres my tutorial about how to implement a syntax hilighter on blogger really easily

    ReplyDelete
  14. Anonymous20 February, 2010 07:45

    here ist a tool wich does this all for you click

    ReplyDelete
  15. Anonymous20 February, 2010 07:47

    link was broken new link

    ReplyDelete
  16. Anonymous22 July, 2010 11:53

    have a look at this:

    http://practician.blogspot.com/2010/07/color-my-world-syntax-highlighter.html

    ReplyDelete
  17. YellowRose11 April, 2011 08:29

    I would like to recommend a syntax highlighter for Blogger that does not use Javascript..Thanks for this post..very useful.

    ReplyDelete