AS3 Syntax Highlighting (with SyntaxHighlighter)

By Mark | Published: September 19, 2007
UPDATE (February 16, 2009):
SyntaxHighlighter 2.0 has been released and I have updated my AS3 extension to be compatible.

I spent a little free time and added AS3 support to SyntaxHighlighter.

Here’s a sample.

According to Alex Gorbatchev (the creator of SyntaxHighlighter) it should be added to the next release. But until then, you can download the source here.

It’s pretty straight forward to use, but just in case:

  1. Download the latest SyntaxHighlighter source.
  2. Download my AS3 extension.
  3. Place the compressed script in SyntaxHighlighter’s Scripts directory.
  4. Replace the css file in SyntaxHighlighter’s Styles directory if you like my version of the code block more than the default.
  5. Upload the SyntaxHighlighter directory to your server.
  6. At the minimum, add the following to your head tag (pointing to wherever you have placed your js, css and flash files):

    			<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
			<script language="javascript" src="js/shCore.js"></script>
			<script language="javascript" src="js/shBrushAS3.js"></script>
			<script language="javascript" src="js/shBrushXml.js"></script>
			<script language="javascript">
				window.onload = function () {
					dp.SyntaxHighlighter.ClipboardSwf = 'flash/clipboard.swf';
					dp.SyntaxHighlighter.HighlightAll('code');
				}
			</script>
  7. Create a pre block similar to the following:

    			<pre name="code" class="actionscript">
				... some code here ...
			</pre>
This entry was posted in Flex. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

9 Comments

  1. Mozart Petter
    Posted October 2, 2007 at 4:41 pm | Permalink

    Thank you, man! Great idea.

  2. Shigeru
    Posted December 19, 2007 at 12:48 am | Permalink

    Thank you!

    BTW, shoud I over-write “SyntaxHighlighter.css” ??

  3. Ahmet
    Posted January 2, 2008 at 4:04 am | Permalink

    Hi,

    that is great! THX.

    Unfortunately the “copy to clipboard” does not work well, seems to be a bug from SyntaxHighlighter….

  4. Ryan
    Posted February 8, 2008 at 11:38 am | Permalink

    Great work. Thanks! I am planning on using this with Movable Type as well. This is a big help.

  5. yz
    Posted February 25, 2008 at 10:44 am | Permalink

    Great! I’m gonna use this.
    Thanx a lot!!

  6. Jason M
    Posted April 14, 2008 at 12:28 pm | Permalink

    Shigeru: Don’t overwrite the SyntaxHighlighter.css .. just add the shBrushAS3.js to the js/ folder of syntaxhighlighter.

  7. beyond L
    Posted February 17, 2009 at 12:25 am | Permalink

    thank`s for your information.

  8. eshaman
    Posted April 2, 2009 at 7:18 pm | Permalink

    Awesome!! Thanks so much, this is exactly what I needed :)

  9. Martin Klasson
    Posted June 9, 2009 at 2:48 pm | Permalink

    I love the sample! It really is looking great. Though one thing that annoys me is the copy/paste-part. I get the “#” for every line when I paste the code somewhere else – and I would like tab-indents instead of spaces in the code – but that might be others who prefers spacing instead.

    But you have done a great job, it looks really smashing!

    # public static function add( v1:Vector, v2:Vector ):Vector
    # {
    # return new Vector( v1.x + v2.x, v1.y + v2.y );
    # }

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Pages

  • Categories

  • Archives