search
Carter Cole LinkedInCarters Twitter PageCarter Cole on Facebook Carter Coles RSS

Thursday, October 29, 2009

Awesome code syntax highlighting made easy

So ive finally come across an awesome syntax highlighter that i think will work well for most any application and it works well on Blogger Hosting which is even better. It uses a flash swf to do a click to copy button and has support for a variety of languages as well as a bunch of themes

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 characters
heres 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...so thats about it. if you found the post helpful please consider linking to this post...
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 tag
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

57 remarks:

Ali Shuja Siddiqui said...

hi, thanks for the post. It works perfectly.

praveen said...

Thanks for the post, Really helpful

Kunto Aji K said...

thanks man..really helpful :)

AXE said...

Really cool! Thanks

Peter Lynch said...

Nice ... eating the dogfood too! Thanks

Michael Papworth said...

Thanks for this. Really helpful and to the point. Actually, easier to digest than http://alexgorbatchev.com

Lorenzo Dee said...

Thanks! It really helped.

Mike said...

Thanks! Works great.

Hendy Irawan said...

Thank you Carter for the excellent post.

I've written a followup post in Kev's Qt Mobility Development: Syntax Highlight Blogger Posts

Carter said...

Thanks for the comment Hendy... Ive updated the code to use the current version like you recommended :)

priya said...

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

G said...

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"

Carter said...

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

Scott said...

Sweet man, thanks for the great tutorial. My code looks very nice in blogger :D

mohammed zait said...

thanks man for this tutorial,great job.

dprasen said...

God Bless u man!

Ravi's Thoughts said...

Thank you for the blog. Enabling support for SyntaxHighligher for my blog was just too easy.

Dat Tai said...

thanks a lot

Brent Coffey said...

Exactly what I needed for my blog! Awesome!

Administrator said...

nice..tank's a lot

MSP said...

This is awesome! Any suggestions for shrinking the text a bit? I tried adding font-size statements to the css theme but that doesn't seem to help.

Carter said...

looks like they use !important to force font size... try using .syntaxhighlighter .line .content with a font-size:20px !important it may override...

СанЁк said...

Thanks a lot

Ian Fiske said...

Thank you, this helped me out!

nXqd said...

I'm looking for this one :)

Φ♠ HßM§ ƆhØmA§Φ♠ said...

Mijo muchas gracias por tu aporte pero te falto algo
cheka esto
http://alexgorbatchev.com/wiki/SyntaxHighlighter:Demo:auto-links

auto-links: false

los auto links false para q los q visiten tu blog puedan nada mas copiar el codigo q pusiste en el SyntaxHighlighter y no estorven las etiquetas
para los q aun no lo tengan o no les aya funcionado a qui les dejo el codigo q funciona en mi blog ya q no me permiten ponrlo en el comentario.

Saludos desde ecuador.

baltazar said...

Thank you, it was very helpful!

I could not find highlighter rules file for Haskell on http://alexgorbatchev.com. Is there any?

Carter said...

this is the full list of all languages supported... i didn't see it listed but they talk about one for Haskell in the comments that may work for you...

nISHi said...

Hi,

Thanks a lot for such a nice post. I was looking for this for a long time.

DITAGIRI said...

It really works :D
Thanks! I did it in my blo

F Quednau said...

Just in case you didn't notice. The hosting site for the scripts is down. Unfortunate! Do you have copies?

Carter said...

hmm seems to be working here...

ernie said...

Thanks for the nice instructions. That really was cool! Is it possible to specify the theme for displaying the code aside from the language?

Carter said...

umm you can change the css for the entire page but not the blocks individually. i think thats what you were asking... you can get a hold of me @cartercole if you have more questions

Fabrizio said...

very good!
Thanks

MaZe said...

Thanks for the nice tutorial. Works like a charm for me, when i use the < ![CDATA[ trick. I've linked your Post in my blog.

John said...

Thanks for the guide! Added a link to my blog :)

Kallin Nagelberg said...

Awesome, worked with no problems at all. Just made my first post with it here: http://techscursions.blogspot.com/ !

Farid Colmenarez said...

I need help with syntax highlighter and javascript. It jumps a line in each highlight

http://dospuntocerob.blogspot.com/2010/03/validacion-en-vivo.html

check it out and help please!

Diego said...

THANK YOU!

cow said...

Thank you, this is really useful :)

Mikhail Koryak said...
This post has been removed by the author.
Mikhail Koryak said...

Good stuff, very useful. I encountered a problem upgrading from 2.0 having to hand edit all my posts to change from TEXTAREA to SCRIPT, anyway, i came up with a javascript solution to convert old style text areas to script block, and posted code on my blog here:

http://notetodogself.blogspot.com/2010/04/migrating-to-syntaxhighlighter-21x.html

Ingo said...

Thanks for the solution. Now it's even working on my blog as well. Using a javascript block finally made the difference in showing up on my blog.
Thanks.

Rahul said...

Awesome post...everything you wanted to know how to post on a blog.

gayell said...

thanks for tips !

-J said...

Great post! Nothing like an example to show how something can be done.

Amit Seal said...

Excellent :D Love this.
And nice FB pic

mopheat said...

thank's, good information

Mark H said...

thanks, this is brilliant

Lal said...

Its really awesome

freak said...

Great Tutorial! Thanks a lot for sharing.

I just wanted to add one small thing:
You can skip inclusion of all js files containing brushes you do not use. Syntaxhighlighter nevertheless works properly and you do not slow down your blog without any need.

Furthermore you should add the stylesheets to the head of your template but add the javascript in the bottom right before </body>. This will result in faster rendering resp. earlier flushing of the document.

Carter said...

i say "just remove any lines for languages you don't use..." so if you dont take them out its your fault.... and i put the css before the javascript so it will already be able to load async

freak said...

Wow, that was quick :D

Sorry, seems like I didn't read carefully :(

However there is a point in moving js to the bottom.

Carter said...

ok ran the speed profiler and they do all download in parallel... they block the dom load by about a sec but their download speeds seem very poor... i used closure on the sql brush and saved 24.42% off the original size... im looking for a CDN to put the files on all bundled as one to cut out a few requests and size

freak said...

That would be great. May be it's quicker to get them directly from bitbucket like that:
<script src="http://bitbucket.org/alexg/syntaxhighlighter/src/378fedcc2759/scripts/shBrushAppleScript.js?embed=t" />

Would be awesome if Alex could provide a minified version either. I opened an issue for that.

Phil said...

Fantastic.

Thanks for this post, it was just what I needed to get SynaxHighlighter working on my blog.

http://atominnovation.blogspot.com/2010/06/syntax-higlighter-success.html

Post a Comment

Link to this post if you found it usefull

Awesome code syntax highlighting made easy