Actionscript syntax highlighter

Due to a limitation in EE I had to change all the Flashmag tutorial code from using <pre> to <code> tags and figured I’d add some nice syntax highlighting while at it. After checking a few, I found SyntaxHighlighter 2.0 that looked clever. Only one problem - they didn’t have a syntax file for Actionscript, so now I’ve made one and you can see it in action here (scroll down to the code listing). You can pop up a nonformatted version, copy straight to clipboard (via a small shim SWF file and print. Nifty, isn’t it?

I initially figured that I wanted all AS3 classes/datatypes to highlight as well, but that was a little too ambitious 😊  The AS3 core language with all AIR and Flex extensions amounts to more than 950 classes! Just the class names make up 14Kb so I rather settled for a lightweight version that only highlights the classes you’ll use the most such as arrays, booleans, sprites and more.

If you want to add this to your own site, download the .js file (lightweight version/full API version) and here for the .css file. You’ll also need to download the SyntaxHighlighter files.

Installing is just a matter of copying the files to the server and adding a few lines to your templates. Here’s what I’ve added to the header on this site:

	<script type="text/javascript" src="/js/shCore.js"></script>
	<script type="text/javascript" src="/js/shBrushAScript.js"></script>
	<link type="text/css" rel="stylesheet" href="/js/styles/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="/js/styles/shThemeActionscript.css"/>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = '/js/clipboard.swf';
		SyntaxHighlighter.all();
	</script>

On Flashmag, I’ve also changed from using the default <pre> tag to <code> by adding this line:

SyntaxHighlighter.config.tagName = "code";