The FooDoo Lounge

Marking up AppleScript code


Displaying AS code on a web page with syntax colouring requires a little effort. Now I'll tell you something you may not already know: All the code on this site was marked up using a slow and embarrassingly ugly script that's not really fit for public consumption. I will try to whip into shape one day, but in the meantime I can at least share the principles of the methods I use.

This information is more about html & css than AppleScript. The examples here all work with XHTML 1.0 and CSS 1 standards.

Styles & Standards

Whilst it's possible to use old style font tag markup, stylesheets offer a much more efficient and compact solution. They also make it very simple to globally change styles at any time without having to touch the html.

Using a modern, standards based approach to markup also provides the maximum level of accessibility and forward compatibility. With a little extra work, it can also be made to display reasonably well in older browsers.

Logical Markup

The starting point is to define a style for each language element - mark up the code based on the language structure. Prior to V2, Apple's Script Editor provides access to its syntax colouring via the AppleScript Formatting dialog in the Edit menu. This has moved to the Preferences in Script Editor 2.

The default styles in OS 10.3 look something like this:

New text (uncompiled)
Operators, etc (+ & ,)
Language keywords
Application keywords
Values (numbers, strings, lists)
Variables and subroutine names

I have no need to represent uncompiled text in html, so I don't define a style for this. There is however another style required for recent versions of AS that cannot be set in Script Editor - Unicode text.

The default styles don't offer enough differentiation for a mark up script that works on text style - operators and values are the same - so I use my own styles, which I find easier to read anyway.

Doing it in Style

The relevant part of my stylesheet looks much like this:

/*   Rules for AS markup - default OS 10.3 syntax colouring   */
.opr,.kla,.kap,.com,.val,.var,.ref,.uni {
	font-size: 95%;
	line-height: 120%;
	background: transparent;
	display: inline;
	} /* common */

.opr {font-weight: normal;  color: black;} /* operators */
.kla {font-weight: bold; color: blue;} /* language keywords */
.kap {font-weight: normal; color: blue;} /* app keywords */
.com {font-weight: normal; font-style: oblique; color: gray;} /* comments */
.val {font-weight: normal; color: black;} /* values */
.var {font-weight: normal; color: green;} /* variables */
.ref {font-weight: normal; color: purple;} /* references */
.uni {font-weight: normal; font-size: 100%; color: black;} /* unicode */

To fully define the appearance, I also have the following style rules, which are inherited by the classes above:

body {
	font-family: Arial, Geneva, sans-serif;
	font-size: 85%;
	line-height: 120%;

Spanning the Divide

The <span> tag is designed to allow custom elements to be added to the html structure, so I use the classes defined in the above stylesheet to markup AS code like this:

<span class="kla">set</span> <span class="var">myVariable</span>
<span class="kla">to</span> <span class="val">100</span>

Which renders like this:

set myVariable to 100

The same thing using <font> tags would require many more characters. At a minimum, it would require something like the "Tag Soup" below, which renders identically in Safari:

<B><FONT SIZE="-2" FACE="Arial,Geneva,sans" COLOR="#000000">set</FONT>
<FONT SIZE="-2" FACE="Arial,Geneva,sans" COLOR="#000066">myVariable</FONT>
<FONT SIZE="-2" FACE="Arial,Geneva,sans" COLOR="#000000">to</FONT>
<FONT SIZE="-2" FACE="Arial,Geneva,sans" COLOR="#006600">100</FONT></B>

The other issue of course is that anytime the style is to be changed, all these font tags have to be edited. This is not necessarily a difficult task using regular expressions but it's a job that doesn't need to be done.


It's possible to do this with more span tags - one for every level of indentation - but this can get complicated. There are probably other ways, but I simply replace tabs in the code with a series of non-breaking spaces:

<span class="kla">tell</span> <span class="var">myObject</span><br />
&#160;&#160;&#160;&#160;<span class="var">doSomething</span><span class="opr">()</span><br />
<span class="kla">end tell</span>

Which renders like this:

tell myObject
end tell

Scripting it

This requires a scriptable editor or word processor to display the styled text. Script Editor 2 is scriptable, as are Script Debugger and Smile. My script uses TextEdit - OS X's SimpleText replacement.

Cocoa apps have a class called attribute run which "subdivides the text into chunks that all have the same attributes." This should be a useful way of doing it and I've seen at least one example of a markup script that does. I don't use it because I still haven't found a way to make scripts this way that produce really clean markup - everything I've tried, as well as the other scripts I've seen, produce bloated html using this method.

Various non-ascii characters have to be translated to html entities. I use the find/replace handler, located here, to do this. My script gets the style of each character and applies span tags to the runs. Scripts need to ignore whitespace - which is styled as operators - and deal with indentation, which I do with non-breaking spaces.


The FooDoo Lounge is Copyright © Richard Morton 2002-2005

|| url:
|| created: 26-May-04, 12:50 AM; updated: 21-Aug-04, 3:35 PM
|| size: 17423 bytes