AppleScript fun: Previewing HTML from TextWrangler

If you edit HTML code on your Mac, you might find that Apple's text-handling programs like TextEdit may not suffice, especially since as a basic text editor it does not provide syntax-aware coloring, the option to collapse sections of code based on tags, and properly index lines of code. In addition, TextEdit relies on direct access to files from the Finder and cannot open remote files.

As a result of these limitations, alternative text-handling tools may be useful for managing HTML documents; one of the most popular is Bare Bones Software's TextWrangler (a free version of its powerful BBEdit package). This software allows you to open remote files using either FTP or SFTP protocols, and manipulate structured text in ways that are very convenient for coders; however, one limitation of the software is it does not have an option to preview relevant code in handling programs. For instance, if you create an HTML document, you may wish to preview your changes to ensure that your code is working as expected; to do so now you have to save the file and then open it directly in a browser like Safari that supports loading HTML from the file system.

As a result of this, to preview a file you will need to first set up Safari to open the HTML file on disk, and then when you save changes in TextWrangler you will need to refresh the browser to preview them. While not a difficult setup, it does become a burden to manage if you are editing multiple HTML files at once.

However, despite this limitation there are some approaches you can take to more quickly preview HTML files you are editing:

Use document title menus.
One feature in OS X that can benefit those who need to preview HTML files is the document title menu that is at the top of each document window. By right-clicking (or command-clicking) the title bar within TextWrangler (or any other editor) you will see a menu of the folder tree for the current document. If you select the document's parent folder then it will reveal in the Finder with the document selected.

At this point you have two approaches. First if your system is set to open HTML files in a browser by default, then you can simply open the file (press Command-O or Command-down arrow with it selected) and the document will open in the default browser. However, if you edit HTML files regularly then you might have your text editor set as the default handling program, in which case you can right-click the revealed HTML file and then choose your preferred browser from the Open With menu.

Use an Applescript service.
Another approach for previewing changes to an HTML file directly from within TextWrangler is to use an AppleScript for parsing its filepath and then loading it in Safari or another Web browser. This approach was suggested by MacFixIt reader Michael, who wrote an AppleScript that when run will perform this action. Michael's script can be found at GitHub, but as basic script code it will not do much. Therefore, to use it you have several options:

1. Save as a user-based AppleScript
   Open the AppleScript Editor utility (in /Applications/Utilities/) and copy Michael's script from github to the AppleScript editor window. Then go to the AppleScript editor's preferences and check the option to show the AppleScript menu (this should look like a small s-shaped docment in the menu bar). In this menu, choose the option to open the user Scripts folder, which will reveal the folder in the Finder. Then save the script in AppleScript Editor to a location such as your home folder, and then in the Finder move the script to the opened User Scripts directory. When you do this, the script will now be available at the bottom of the Scripts menu for quick access.
   
   The convenience of this setup is the script will be run immediately and quickly, but will not be contextually aware so it will be available even when TextWrangler is closed and not being used.
2. Save as an AppleScript application
   A similar option to directly running the script is to save it as an AppleScript application from within the AppleScript Editor, so when saving the script in the editor, choose Application from the File Format menu; this will bundle the script in a small application file that will run it when launched. With this setup, you can place the application in your Dock and be able to quickly launch the preview script from there. This may be a little redundant to using the AppleScript menu and will add another item to your Dock, but it is an option and will take one less click.
3. Use the script in a TextWrangler service
   A final option is to use Apple's Automator program to set up the script to only be available when TextWrangler is open. To do this, open Automator and create a new service (click the cog wheel icon when creating a new workflow). Then change the menus at the top of the workflow so the service will receive "no input" and be specific to TextWrangler (you will have to select TextWrangler by selecting the Other option in the application menu).
   
   Next expand the library of automator actions and in the Utilities section drag the Run AppleScript option to the workflow window (you can also search for this action if you cannot locate it manually). In the Run AppleScript workflow, locate the text that says "(* Your script goes here *)" and replace it with Michael's script from github (you can also replace all of the default script text with the new script to make things easier, so either approach will work). Save the workflow (call it something like "Preview in Safari"), and it should now be available in TextWrangler if you select the TextWrangler > Services menu.
   
   The final step is optional; you can set a hotkey shortcut to this new service. To do so, go to the Keyboard system preferences and select the Keyboard Shortcuts tab followed by the Services list. Then scroll down to the General section of this list and locate your new Preview in Safari service. By default there will be no shortcut associated with it, but you can click the "none" text to the right of it and provide a unique hotkey sequence to use. Since this service will only be available in TextWrangler you can use any hotkey sequence that is not currently in use in TextWrangler (e.g., Shift-Command-P).
   
   This approach is the preferred way to implement this TextWrangler-specific script, as it will only make it available when you are running TextWrangler, and also has options for binding a hotkey to it so it can be easily accessed.

Questions? Comments? Have a fix? Post them below or e-mail us!
Be sure to check us out on Twitter and the CNET Mac forums.