One thing I had been looking for was a Wordpress plugin to handle syntax highlighting for AS3 code snippets I’ll be posting. Many of the ones at the Wordpress site look great and support all the popular languages. However, wanting to take a break from my other personal project but still keep busy I figured why not write a basic one myself. It’s just a temporary solution as there are a few bugs I’m aware of. If I ever find myself posting code all the time, I’ll switch to one of the more powerful systems.
Features
To keep things simple, it just has a few limitationsfeatures.
First, it only supports the AS3 language elements and none of the classes, methods, or properties in the standard flash or mx packages. I may add those in the future but I doubt it.
Second, I wanted to have the highlighting done client-side via JavaScript. Since i’m only using this for snippets, it won’t bother me if a user runs into browser compatibility issues or has JavaScript turned off and the code isn’t colored.
Demo
/*
* multiline block comment test
*/
package nochump {
import flash.display.Sprite;
/**
* asdoc comment test
* @author David Chang
*/
public class SyntaxTest extends Sprite {
public static const ZERO:Number = 0;
protected var _num1:int = 1;
internal var _num2:uint = 2;
/* another block comment test */
public function SyntaxTest():void {
// comment test
trace(1);// end of line comment test
}
}
}
Compatibility
Tested successfully on the following browser/OS:
Firefox 1.5.0.9/OSX
Safari 2.0.4/OSX
Firefox 2.0.0.2/XP
Internet Explorer 6.0/XP
WordPress 2.1
Download
Usage
To install the Wordpress plugin, copy the wp-as3highlighter folder to your Wordpress plugins folder (<wordpressroot>/wp-content/plugins/) then just activate it under the plugins section of the administration panel. Now to add code into a post, be sure that you are in the “code” mode when you’re writing your post and add the following:
<pre class="as3">
// insert your AS3 code here
</pre>
Of course there are issues with using pre which you can read about here. Another concern is that the “visual” mode seems to reformat text within a pre element so your AS3 code could lose some formattings. I generally wait till I’m done writing the post before inserting code snippets or just try to stay in “code” mode.
You may instead just want to use the JavaScript which also offers a few other little features. After including as3highlighter.js and as3.css, you can do the following:
as3Highlighter.transformCode(code);
Returns a string of the code styled with syntax highlighting.
as3Highlighter.highlightClass(className)
Styles the innerHTML of all elements in the document with the class className.
as3Highlighter.highlightIframe(elementId)
Experimental feature which replaces the element specified by elementId with an iframe containing the styled contents of the element.