Perfect Preview With MarsEdit
September 6th, 2007One of the most time-saving features of MarsEdit is its Preview window, which uses the power of Safari’s WebKit to render a browser-perfect version of your post before you send it to the blog. This is fantastic because you can spot formatting errors and typos before publishing the item.
Unfortunately, the initial setup is a little bit daunting. Straight out of the box, MarsEdit’s preview looks pretty bland. It won’t have any of the fantastic stylings of your blog until you edit the “template” that MarsEdit uses to generate the preview.
To be sure, there’s a lot MarsEdit could do to make this template-editing process easier. For instance, Windows Live Writer uses a nifty trick where it posts a temporary entry and then immediately deletes it, so that it can get a “reference” page to build a template from.
I’m going to look at ways of streamlining this process in MarsEdit, but for the time being I thought it would help to post a sort of tutorial about how you can get your own blog set up with “perfect previews” in MarsEdit.
Step 1: Open A Reference Entry
We’re going to build your template by starting with a “typical” entry page from your blog. Go to your blog and click on the title (usually) of one of your posts, to get the “all on one page” view. For instance, here’s the single page view for this entry.
From your browser, select “View Source.” This varies from browser to browser but in Safari you can just control-click the page content and then select it from the menu.
Step 2: Copy HTML Into MarsEdit
With a post editor window open in MarsEdit, click the Preview icon in the toolbar to open the Preview window. Then click the “Edit Template” button in the lower-right corner of the window. You’ll probably see the default template that MarsEdit uses for all new blogs. Delete the default template text to make room for your custom template.
Copy the HTML source from the web browser’s “View Source” window and paste it right into the MarsEdit template window. You should immediately see the preview window become a lot more like your blog looks on the web!
Step 3: Fix Links
This won’t be necessary for all blogs, but if your HTML has relative links in it, you’ll need to replace those links with full links. For instance, if your HTML links to CSS style sheet like this:
href=”blog/wp-content/themes/rsbubbles/style.css”
You’ll need to change it to include your host name:
href=”http://www.red-sweater.com/blog/wp-content/themes/rsbubbles/style.css”
You’ll probably know that you need to find some more links to change because something is missing or just doesn’t look right in the preview. Try Cmd-F to search for “href” and “url(” in your template.
Step 4: Insert Placeholders
By now you should have a pretty good looking preview! The only problem is, it shows you the content of your reference post! You need to insert placeholders where all the “interesting things” are. So you squint your eyes and go scrubbing through the template, looking for the “content” and replacing it with a template placeholder. Try Cmd-F to search for the first word in your blog post, and then select the text and all its HTML until you get to the end of the blog post. Delete all of that, then select “Insert Placeholder -> Body” from the placeholder popup.
Do the same for your post’s Title, Categories, etc. You’ll see your template start to magically come to life as a perfect mirror of the post you’re currently editing.
Caveat: Because of the way MarsEdit’s “instant” updates work in the preview window, you can’t use placeholders in the <head> secton of your template. This usually isn’t a problem, because you can use hard-coded references to your blog’s CSS files, etc.
Final Touch: Font Size & Style
As a final touch to make the content match the way it looks in your favorite browser, make sure to change the default preview fonts in Preferences -> Preview. You can look in your browser’s preferences to find the default fonts you’re using there, and ensure that you get the same look in MarsEdit.
As I said, the process of setting up a perfect preview is a bit tedious, but the results are simply amazing. For instance. I’m about to publish this post, and before ever seeing it on the web, I know just what it’s going to look like:
I hope you’ll find MarsEdit even more enjoyable after learning how well it can preview your posts.
