Preview on Emet CMS

CSS preview

Mon, 01 Jan 0001 00:00:00 +0000

The CSS preview renders your Markdown in the browser (with the same remark and rehype pipeline the visual editor uses) and puts the result in a sandboxed frame, where it can be styled with your site’s actual stylesheets. You don’t get Hugo’s layouts, but you do get your fonts, colours and spacing, which is most of what matters while you’re writing. It updates half a second after you stop typing.

Template interpolation

Mon, 01 Jan 0001 00:00:00 +0000

An inline shortcode carries its Go template in the page, so the preview pane has the template right there. It can’t run it, since there’s no Hugo in the browser, but it can do the next best thing: find the places where the template reads its parameters, drop the values in and throw away whatever’s left. This page is about how far that gets you.

It only applies to inline shortcodes. Block shortcodes use the {{field}} preview templates from site.yaml, and Emet never reads your layouts/shortcodes/*.html files in the preview.

Hugo server preview

Mon, 01 Jan 0001 00:00:00 +0000

The CSS preview is a good approximation, but it’s still an approximation: no layouts, no partials, and shortcodes rendered from stand-in templates. If Hugo is installed on the machine Emet is running on, you can skip all that and look at the real page. Emet loads it from a hugo server in the preview pane, and Hugo’s live reload keeps it current.

This needs Hugo on the same machine as Emet, so it’s only available in two situations: