Getting Your Micro.blog Theme To Display Properly in Mars Edit Previewer

Mars Edit Preview Template Editor

I really love Mars Edit and use it to craft most of my posts here on Micro.blog. There is one area where it has been falling short on me though, post previews using my blog theme. Mars Edit has a feature where it is supposed to be able to download the styling of your blog for the post previewer. It doesn’t currently work for Micro.blog though. Manton has told me that he and Daniel, the Mars Edit developer, have spoken about getting this fixed in the future. Until then I’ve done this clever little hack to get my previews looking right in Mars Edit and thought I’d share.

You’ll need at least a basic level of understanding of HTML to do this. If that describes you just follow these steps.

  • Open one of your post pages in your browser of choice. I recommend one with a title so you’ll have the page elements that display it when you have one. The previewer will just leave it blank once configured for posts that don’t have a title.
  • Find the option to view source, select all of the source code and copy it.
  • Open the template editor in Mars Editor as depicted in the image above.
  • Just below the existing template HTML code paste in the copied source of your blog post. This will import all of your micro.blog CSS into the template preview.
  • Start stripping all the irrelevant bits from the source like the parts for twitter cards and google etc.
  • Once you’ve got it stripped of the elements you don’t need for the preview, start replacing the actual post content in the HTML with the Mars Edit placeholders. They look like this #body# and there is even a drop down menu at the top to add them at the cursor location. The default HTML above helps here as a guide, this is why I said paste your blog source code below it.
  • After you get your preview working and displaying your draft post correctly so it appears as it would on your blog you can safely delete the original template HTML code above.
  • Don’t worry if you mess something up, you can just hit the Restore Default button at the top and start over.

Now you can preview your posts in Mars Edit and see them as they will appear on your blog. The previewer is even resizable so you can see how it will render on mobile versus desktop. Your newly composed template is even used in the main Mars Edit window for the lower pane previewer as depicted below.

Mars Edit Main Window

*****
Written on