Preview blog posts in actual blog theme?

Sorry if this has been discussed - I tried searching for it and couldn’t find anything relevant.

I’m really enjoying using micro.blog to host my website/blog - but it’d be nice if there was a way to preview content in my actual theme before publishing a blog post. Is there something i’m missing, or is this not a possibility?

Thanks!

1 Like

It’s not possible but it is planned. I agree this is really important.

3 Likes

Ok, thanks for the quick response. Looking forward to it :smile:

If you use a Mac, it is possible using MarsEdit.

Thanks! I actually write and post primarily from my phone (which doesn’t seem to have MarsEdit), but I will check it out on desktop.

iA Writer has templating, which might get the job done. I’ve yet to test it but it has always looked promising for this scenario.

iAWriter I don’t think has custom templates for previewing. MarsEdit has the advantage of autodetecting and downloading your CSS.

Templates are built with web pages. You can use HTML, CSS, and JavaScript to lay out your documents. If you know how to make a web site, you can easily make an iA Writer template.

Source: iainc/iA-Writer-Templates: Preview, create PDFs, and print documents in your own style with templates in iA Writer.

That’s from GitHub and they have info on their site. I’m definitely still a novice with this kind of thing but it sounds like it should work.

Also, yep, MarsEdit is great but as JP said he mostly works from the phone.

Ah look at that. In the preview menu it doesn’t show there could be custom templates until you add one.

That said, while that might get you things like text color and size to some degree, and you could probably make the template match, MarsEdit does some awesome stuff, like recognize HTML to grab your headers etc automagically.

I tried to find where MarsEdit saves the preview template (found the default, but not the one it downloaded for me) to see if it’d be possible to grab that to help someone out using iAWriter on mobile, but alas, I couldn’t find it.

I also think Marked.app is great for this (and use it with Markdown in general)

1 Like

Yes, this would be a nice feature to have. Thanks for your efforts.

MarsEdit stores the preview template in a property list file for the blog along with many other settings/data. The easiest way to find it is to hold the option key while selecting Help → Open MarsEdit Data Folder. Within that folder you’ll find a DataSources.plist file that contains all the blog configurations. Search for “previewTemplate” to find the storage for the template.

Shameless self-promotion: my new Micro.blog plug-in might be a solution. A simple post editor with one magical feature: live previews.

See it in action below, try it on my blog, or look up :unicorn: Magic Preview in the plug-in directory. :warning: Read the important notice there before installing.

1 Like

Very cool, thanks @sod! :tada:

Wanted to note that this would be especially nice for people who use KaTeX / MathJax to render math. I also think the rendering of fenced codeblocks (using “```”) doesn’t work in the All Posts view, so this would be useful for that!

+1 for Marked.app. It’s a great companion to Drafts with an action to preview your markdown.

@jyc, it supports displaying KaTeX / MathJax too.

1 Like

Thanks, I appreciate the suggestion! However FWIW my workflow before Micro.blog was writing in iA Writer then using Zola in watch mode for live previews. The editing/previewing experience was great, but the whole reason I moved my blogging to Micro.blog was to only have to use one app! So it’s a great workaround, but not for my priorities.

The challenge with previewing something that requires a JS library for parsing (or other features like short codes) is a pretty big mismatch since that information in Hugo, which builds the blogs, requires a build step. Locally, Hugo can rebuild pretty fast and I think even do an incremental build if a single server is kept running for its live reload feature, but that really wouldn’t work in a web app context. That’s why when editing templates or designs it can take quite a while to see a preview— it takes a rebuild. Getting an authentic look at what it’ll be— especially with a JS parse step may be tough.

1 Like

Yea! Coming from Zola where I wrote my own templates and JavaScript I definitely understand that the general problem is tough. I can’t speak for others, but the two following features would actually be totally sufficient for me—I wouldn’t need Micro.blog itself to evaluate any JS for parsing, etc.:

  1. Either render Markdown using the same renderer that either Hugo uses (AFAICT Goldmark) or the renderer that the existing Micro.blog JSON endpoint already uses (which might actually be Hugo)—both support code blocks, unlike the current renderer in the “All posts” view
  2. Allow me to embed JavaScript in the preview page, the same way I can embed JavaScript in my blog using the Meta Tags plugin. That way I can just include KaTeX.

Of course I’m not privy to the implementation of Micro.blog, but I wanted to emphasize that this

  1. does not require the full Hugo build step (if just rendering posts using Goldmark) and
  2. only requires using the same renderer that Micro.blog already uses for the JSON endpoint

I know that the JSON endpoint’s HTML output + KaTeX is sufficient for my use case because that’s actually how I render Micro.blog posts on my own website :slight_smile:

Thanks again to the Micro.blog team.