Exporting TextMate Code to HTML
- February 05, 2005
- 13 comments
I’ve been using TextMate, the new Mac text editor on the block, a lot more lately. In fact, I recently purchased a license for it. One of the reasons behind my purchase was the community of people around it. Here’s an example (this is also an example of why I love the Web):
Last night, while looking for some Ruby code examples, I came across Joey Gibson’s blog. Not only did he have some good example code, but that code was highlighted and numbered for easier reading.
I emailed him and asked him how he got the HTML for it. He quickly responded, telling me:
The colorizing was done using Vim (the free VI clone http://www.vim.org). If you are already a Vim user, just open the file you want colorized and type this
:runtime! syntax/2html.vimI have added it to my _gvimrc so that I can run it by just typing Ctrl-T. What happens is Vim will split the window, with your original file in the top window, and a fully colorized HTML version in the bottom. For my source examples, I just copied out the chunks I needed (omitting the head, body, etc) and pasted it into my blog entry.
I’ve never used Vim and don’t plan on learning it, but I do use TextMate. I went looking for a way to have TextMate do the same thing, but couldn’t find anything. I subscribed to the TextMate newsgroup and posted my problem.
This morning I had a couple responses, one of them being from Allan Odgaard, the creator of TextMate. Someone had pointed out the open-source GNU source-highlight, but didn’t give any instructions on how this could work with TextMate. Allan showed me how he got it installed and working with TextMate.
Download the latest GZIP file and unpack it. Follow the standard installation instructions (configure/make/make install). I installed it into /usr/local instead of the standard /usr. Thanks to OS X’s Unix underpinnings, source-highlite can be used by other apps either through the terminal or any app that works with the Unix shell.
In the latest TextMate beta (beta4 at the time I wrote this), create a new command:
expand -3 | source-highlight -sruby -fxhtml -n
The input can be set to whatever you want. I chose “selected text”. I set the output to the OS X clipboard for easy pasting into my blog or wherever. You can then assign a key-combo to it for even quicker access.
The above command tells TextMate to convert tabs into spaces, then pipe the selected text through source-highlight with the source being Ruby code and the result being XHTML. The ‘-n’ is for numbered lines.
Here’s an example of the output:
00001: def fact(n) 00002: return 1 if n == 0 00003: f = 1 00004: n.downto(1) do |i| 00005: f *= i 00006: end 00007: return f 00008: end 00009: print fact(ARGV[0].to_i), "\n"
I asked Allan if it was possible to bundle the source-highlight files with TextMate and make the command more dynamic to work with whatever language is currently open. This would be a great feature which I’m sure more people than myself would use. We’ll see what happens.
I’ve now put together a TextMate source-highlight bundle. With the bundle, you no longer need to compile and install source-highlight yourself. It’s already compiled and stored in the bundle. Right now, the bundle works with C/C++, Perl, PHP and Ruby. Download it and try it out.
Hi Colin, I’ve worked with SubEthaEdit (and still have a copy), but never really got comfortable with it. It’s too barebones (no pun intended). TextMate is much more flexible and powerful an editor and looks to get even more powerful in the near future.
That said, if you want a nice, easy-on-the-pocketbook editor, then SubEthaEdit is a good choice.
I agree, it is a little thin – although it has been filling out in recent releases – and I still find the document management to be non-existant.
That said, TextWrangler is now free and another good editor for web development is skEdit which has improved considerably in the past couple of releases. I’m not trying to shake your faith in TextMate – I haven’t had a chance to use it – I thought I’d mention a couple of nice editors since I know at one point you were inquiring. 
Ray
Greg Militello
March 8, 2005
Greg Militello
March 8, 2005
Just did. I guess I didn’t catch the user interface. Howeverr I get this in my clipboard:
/bin/bash: line 1: tr: command not found
/bin/bash: line 1: tail: command not found
/bin/bash: line 1: grep: command not found
/bin/bash: line 1: cut: command not found
/bin/bash: line 10: expand: command not found
source-highlight: option requires an argument—s
Greg Militello
March 17, 2005
Definitely a useful hint. I thought I would mention that the recent versions of SubEthaEdit allow you to copy your highlighted code as XHTML which will work with any of the languages it supports. In general the program is a good development tool for the Mac.