Syntax Highlighter

This blog has primarily been a place to learn ColdFusion. Lately I have become a big fan of Flex/ActionScript so I want to start spreading some knowledge in that area as well. I needed to find a way to share code from Flex,ActionScript,XML and ColdFusion. I looked around and found Syntax Highlighter.

SyntaxHighlighter is here to help a developer/coder to post code snippets online with ease and have it look pretty. It's 100% Java Script based and it doesn't care what you have on your server.

This tool comes packed with support for many languages out of the box. I needed to find support for ColdFusion, ActionScript & MXML. A quick look around and I was able to find what I was looking for. The one cool thing I really like about this tool is that it allows for visitors to copy code to clipboard. So how do you get started? First head on over and download the code. Next you will want to link to the stylesheet. This controls the look and feel for the basic block that contains the code.

<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>

Finally, to get the whole thing to render properly on the page, you have to add JavaScript to the page. The Core file is needed and then any language that you plan on using must be included. The ClipboardSwf variable is not needed but like I said before I think that is a really great feature. <script language="javascript" src="js/shCore.js"></script> <script language="javascript" src="js/shBrushColdFusion.js"></script> <script language="javascript" src="js/shBrushXml.js"></script> <script language="javascript" src="js/shBrushMxml.js"></script> <script language="javascript" src="js/shBrushAS3.js"></script> <script language="javascript"> dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; dp.SyntaxHighlighter.HighlightAll('code'); </script>

Now you are ready to rock and roll. When creating a new post just use the following syntax. The class will be the name of the language this code will contain.

<textarea name="code" class="mxml">
... some code here ...
</textarea>