here is the code you need to drop right before your <head> tag in the HTML of your blogger template (or wherever you may find yourself in a need of a syntax highlighter). just remove any lines for languages you don't use...
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>and a little about how to use it...
you can use a special <script> tag with CDATA around it
<script type="syntaxhighlighter" class="brush: html"><![CDATA[ <html> <head> <title>Carter Tomorrow Fund Donations</title> <meta name="title" content="Help Give to the Carter Tomorrow Fund" /> <meta name="description" content="Show your support and help out with a small gift" ]]></script>
- or -
you can use a <Pre> tag with html escaped charactersheres a quick way to escape your html
Theme Preview Widget
and this is my way cool theme switcher... just click the css theme below to see how it looks (you will need to change the second line that imports the style sheet to use the filename you want to use from below) check below the switcher to see theme with white background...- shThemeDefault.css
- shThemeDjango.css
- shThemeEmacs.css
- shThemeFadeToGrey.css
- shThemeMidnight.css
- shThemeRDark.css
and you can see your linkback at the bottom :) thanks
Another note for blogger users...
you will see the following message if you you the<script class="brush: html" type="syntaxhighlighter"> method
Your HTML cannot be accepted: Tag is broken: ![CDATA[
Stop showing HTML errors for the body of this post
just disregard it... im sending a message to blogger about it but it doesn't understand CDATA tagStop showing HTML errors for the body of this post
it will also keep you from saving a draft of the post. its uncool but you can fix it by putting a space before the <![CDATA[ like this < ![CDATA[ (dont forget to add a space at end and change ]]> to ]] >) then it wont count it as a broken tag and you can save just remember to switch it back before you publish
18 comments:
hi, thanks for the post. It works perfectly.
Thanks for the post, Really helpful
thanks man..really helpful :)
Really cool! Thanks
Nice ... eating the dogfood too! Thanks
Thanks for this. Really helpful and to the point. Actually, easier to digest than http://alexgorbatchev.com
Thanks! It really helped.
Thanks! Works great.
Thank you Carter for the excellent post.
I've written a followup post in Kev's Qt Mobility Development: Syntax Highlight Blogger Posts
Thanks for the comment Hendy... Ive updated the code to use the current version like you recommended :)
Hi
I am not able to get the colors in pre and script tags - can you help me with that..my email is hereisafreelancer@gmail.com
this work of urs is just awesome
Thanks in advance
Priya
Thanks! should point out that if you get a Tag is broken: ![CDATA[ error when you try and post just ignore it by checking the check box "Stop showing HTML errors for the body of this post"
Great point G! its also lame because it doesn't let you save the post either because html is broken... ive updated the post to explain it all. thanks for pointing that out we are always making this post better...
Sweet man, thanks for the great tutorial. My code looks very nice in blogger :D
thanks man for this tutorial,great job.
God Bless u man!
Thank you for the blog. Enabling support for SyntaxHighligher for my blog was just too easy.
thanks a lot
Post a Comment