Preview templates

Here an example I just made up based on a CSS sample on GitHub:

Essentially, to make a preview template, you want to make a valid HTML file, with the CSS (either in <style> tags or loaded from a remote source), and replace the place you want the draft content in inserted with appropriate drafts template tags. In most cases, if you are building Markdown previews, you want to use:


The [[draft]] tag gets replaced by the content of the draft. The %% %% around it tells the template engine to run that content through the Markdown engine to convert it to HTML.

If you are not familiar with HTML/CSS, this is a bit daunting. The most common case for this is building a preview that will match your personal blog theme. In a lot of cases this can be accomplished by viewing source on one of your blog posts, copy and pasting that content into template file - and the tricky part is just figuring out what part of that HTML to remove and replace with the %%[[draft]]%%.

1 Like