tempers: 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/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> 

<script language='javascript'> 

SyntaxHighlighter.config.bloggerMode = true;

SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/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

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)

Thursday, October 29, 2009

Awesome code syntax highlighting made easy

- or -

5 comments:

Cloud

Other Great Posts