January 31, 2009 | In: Development, Mac
Create HTML from Code with TextMate
TextMate is a very popular text editor with a lot of features and “bundles” (think “plugins”) that runs on Mac OS X. TextMate contains an often overlooked feature for creating nice html versions of your code for display on your site. In order to do this, follow these steps:
1. In TextMate, go to Bundles -> TextMate -> Create HTML from Document. You can also Create HTML from Document with Line Numbers.
click to enlarge
2. You’ll see a new file appear. This is a normal HTML file that contains all the CSS needed to duplicate the color scheme and styling of your TextMate theme. (I’m using the “All Hallow’s Eve” theme)
click to enlarge
3. You can copy and paste the CSS code into a new css file that you include in your site or blog. Then simply copy and paste the source of the code itself (everything between the beginning and ending <body> tags) into your page or post. Try not to pay too much attention to the HTML that’s generated – it’s definitely messy but it does work.
If all goes well, you can display your code online on your web site or blog with great syntax highlighting that matches the language you’re using.
Example:
has_many :poll_answers
NUM_WEEKLY_QUESTION_ANSWERS = 5
validates_presence_of :question
validates_presence_of :go_live_on
# Return polls that are valid as of "right now"
# to enable a bit of caching,
#don't include the seconds in the query
Poll.last(:conditions => [ "go_live_on <= ?",
Time.now.strftime("%Y-%m-%d %H:%M:00") ])
end
end
By including the new CSS in your site instead of pasting it into your page or post, you can take advantage of TextMate’s ability to create only the CSS for your theme. So if you change your blog design and color scheme or your TextMate theme in the future, all you have to do is regenerate the CSS and overwrite the file containing the old theme’s CSS.
click to enlarge
1 Response to Create HTML from Code with TextMate
Robert Harder
December 13th, 2010 at 2:39 pm
Sadly, this only seems to generate some default CSS code. At least, it does not generate CSS for the theme I’m using (http://web.mac.com/alexander.atallah/Mac/Development/Entries/2007/10/7_Note-Taking_Bundle_for_TextMate.html).
-Rob