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.; November 15, 2009 6:33 AM
praveen said...: Thanks for the post, Really helpful; November 15, 2009 3:16 PM
Kunto Aji K said...: thanks man..really helpful :); November 17, 2009 6:54 AM
AXE said...: Really cool! Thanks; November 24, 2009 12:32 PM
Peter Lynch said...: Nice ... eating the dogfood too! Thanks; November 27, 2009 9:39 PM
Michael Papworth said...: Thanks for this. Really helpful and to the point. Actually, easier to digest than http://alexgorbatchev.com; December 8, 2009 12:31 PM
Lorenzo Dee said...: Thanks! It really helped.; December 14, 2009 6:27 AM
Mike said...: Thanks! Works great.; December 22, 2009 2:56 PM
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; December 29, 2009 8:16 AM
Carter said...: Thanks for the comment Hendy... Ive updated the code to use the current version like you recommended :); December 29, 2009 9:01 AM
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; December 30, 2009 7:56 AM
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"; January 4, 2010 12:09 PM
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...; January 4, 2010 12:28 PM
Scott said...: Sweet man, thanks for the great tutorial. My code looks very nice in blogger :D; January 5, 2010 10:10 PM
mohammed zait said...: thanks man for this tutorial,great job.; January 11, 2010 8:32 AM
dprasen said...: God Bless u man!; January 13, 2010 3:10 PM
Ravi's Thoughts said...: Thank you for the blog. Enabling support for SyntaxHighligher for my blog was just too easy.; January 15, 2010 1:59 AM
Dat Tai said...: thanks a lot; January 21, 2010 1:15 AM
Brent Coffey said...: Exactly what I needed for my blog! Awesome!; February 12, 2010 6:07 AM
Administrator said...: nice..tank's a lot; February 12, 2010 10:45 PM
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.; February 15, 2010 8:38 PM
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...; February 15, 2010 8:45 PM
СанЁк said...: Thanks a lot; February 17, 2010 9:28 PM
Ian Fiske said...: Thank you, this helped me out!; February 18, 2010 4:53 AM
nXqd said...: I'm looking for this one :); February 23, 2010 7:56 AM
Φ♠ 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.; February 25, 2010 6:52 PM
baltazar said...: Thank you, it was very helpful!

I could not find highlighter rules file for Haskell on http://alexgorbatchev.com. Is there any?; March 16, 2010 4:11 AM
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...; March 16, 2010 7:07 AM
nISHi said...: Hi,

Thanks a lot for such a nice post. I was looking for this for a long time.; March 19, 2010 2:55 AM
DITAGIRI said...: It really works :D
Thanks! I did it in my blo; March 20, 2010 4:06 AM
F Quednau said...: Just in case you didn't notice. The hosting site for the scripts is down. Unfortunate! Do you have copies?; March 25, 2010 1:56 AM
Carter said...: hmm seems to be working here...; March 25, 2010 9:11 AM
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?; April 1, 2010 2:44 AM
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; April 1, 2010 6:36 AM
Fabrizio said...: very good!
Thanks; April 3, 2010 7:32 PM
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.; April 5, 2010 4:54 PM
John said...: Thanks for the guide! Added a link to my blog :); April 6, 2010 7:32 AM
Kallin Nagelberg said...: Awesome, worked with no problems at all. Just made my first post with it here: http://techscursions.blogspot.com/ !; April 6, 2010 12:29 PM
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!; April 7, 2010 8:09 PM
Diego said...: THANK YOU!; April 14, 2010 12:08 AM
cow said...: Thank you, this is really useful :); April 23, 2010 7:24 PM
Mikhail Koryak said...: This post has been removed by the author.; April 23, 2010 9:35 PM
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; April 23, 2010 9:36 PM
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.; April 26, 2010 1:43 PM
Rahul said...: Awesome post...everything you wanted to know how to post on a blog.; April 28, 2010 11:49 AM
gayell said...: thanks for tips !; April 30, 2010 8:24 AM
-J said...: Great post! Nothing like an example to show how something can be done.; May 4, 2010 1:46 PM
Amit Seal said...: Excellent :D Love this.
And nice FB pic; May 5, 2010 11:34 PM
mopheat said...: thank's, good information; May 6, 2010 2:33 PM
Mark H said...: thanks, this is brilliant; May 11, 2010 4:33 AM
Lal said...: Its really awesome; May 26, 2010 3:26 PM
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.; May 27, 2010 11:37 AM
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; May 27, 2010 11:39 AM
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.; May 27, 2010 11:44 AM
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; May 27, 2010 12:00 PM
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.; May 27, 2010 12:38 PM
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; June 14, 2010 2:19 AM

Link to this post if you found it usefull

Awesome code syntax highlighting made easy