Hello Code!

My first code snippet:

Now that I finally have a simple, efficient way to post code snippets, I can start writing some Flash tutorials. I plan to document my own real-world experiences with ActionScript 3.0 on this blog. Hopefully this will save you (and a future me) a lot of time and frustration.

Problem: Add syntax highlighted code snippets to my WordPress blog.

Solution: SyHi.

Details: My search for a code editor started with Specky Boy’s great collection of code plugins. I tried Advanced Code Editor and Developer Formatter, but found them to be a bit too clunky for my taste (actually Developer Formatter gave me an ambiguous php error about a missing parameter). Ironically, I happened upon my WordPress code editor of choice on accident, while searching the WordPress database for coffee2code. I settled on SyHi. It’s exactly what I needed: a plugin that highlights code snippets and preserves code formatting (I hate copying code from a webpage and having to re-enter all of that missing whitespace manually).

The source code for the above snippet is:

<code lang="actionscript3">
package{

	import flash.display.Sprite;

	public class HelloWorld extends Sprite{

		public function HelloWorld(){
			trace("Hello!");
		}

	}
}
</code>

Problem #2: Add my own css formatting to code snippets.

Solution: Delete SyHi’s default css (wordpress/wp-content/plugins/syhi/syhi.css) and copy the contents of that file into your theme’s style.css file.

For reference, here is the default css for SyHi v0.0.3:

You can edit these two classes to make your code snippets appear any way you like. My final classes look like this: