Friday, July 26, 2013

How to preview actionscript and mxml files in Quicklook (OSX)

Quicklook is a default application in OSX, which allows you to preview the content of a file, without opening it in a specific editor. for e.g. a text file, a video file, an audio file etc. I like this a lot. I deal with a lot of actionscript and mxml source files and having a quick look to .as and .mxml files makes my workflow a lot easier. I don't have to import the project into Flash Builder or IntelliJ(tools I use the most). The steps below will show you how to achieve this. By default, if you try to preview a .as file, Quicklook will show you something like this below:

and a .mxml file default preview should look like this:

  1. Download QLColorCode plugin for Quicklook

    Quicklook is extensible and there is a plugin named qlcolorcode. You can download it from this link1.
    Once downloaded place it in Quicklook directory. Open finder and press Cmd + Shift + g and type /Library/Quicklook

    and place the downloaded .qlgenerator file in

    Once done, we need to configure Qlgenerator for actionscript and mxml files.
  2. Configure QLgenerator for actionscript and mxml

    1. Duplicate xml.lang and rename to mxml.lang

      Right click on the qlgenerator file and click on "Show package contents"

      and browse into Contents till you reach the .xml file selected in the screenshot below:

      Duplicate "xml" file and rename it to "mxml"

  • Update filetypes.conf

    Now we need to update filetypes.conf file, which can be located as shown below:

    Edit files types in your favorite editor and add "mxml" at the end of $ext(xml) line number 54, it could be different for you.

    • Update Info.plist file

      Now, next step is to update Info.plist file and add description for ActionScript and MXML files. Info.plist can be found right under the Contents folder, screenshot below:

      You need to add the following, in your Info.plist file

      and
  • Demo

    Once done, now its time to test. To get these changes to take effect, we need to refresh finder. Open Terminal and run the command shown in screenshot below:

    Now, locate a mxml file in Finder and press Space bar to see it in action:
  1. https://code.google.com/p/qlcolorcode