Using Preview Templates

Using Preview Templates

We can enjoy writing in Markdown but having a nice preview is a must have.

More than a CSS styling

In general, you can modify a CSS style sheet in order to customize the HTML preview.

I’ve decided to go further and SmartDown is now supporting preview templates.

With a preview template, you can see how your final result will be, will all the surrounding elements.

Prerequisites

In order to create a preview template, you will need:

  • A minimal knowledge of HTML & CSS
  • A text editor (even if you could do it in SmartDown, I recommend a multipurpose editor like SciTE

Common characteristics

  • Templates files are html files which can contains images, external javascript, fonts, …
  • Templates files must end with _template.htm (not html)
  • Templates files need to be located in the template directory. You can go to File Menu > Settings > General and click on “Open Template Directory” to get it.

Template elements

The content itself

You need at least to have a div element with the content id. The inner content of the div will be replaced by the body of your text (without metadata).

Meta data

The following metadata are supported for the moment. I am planning to add more in the future.

In all cases, you will need to have a text element (span, Hx, ..) with the same id like for instance:

 

  • title
  • author

Choosing a template

Once you’ve defined several templates, you can simply select them by clicking on the view options icon:

selecting a markdown preview template
selecting a markdown preview template

Previewing markdown documents

Previewing markdown documents

Previewing the result of your work is an important functionality of a Markdown editor. There are different approaches, each of them with their own advantages and weaknesses.

Current market situation

There are two main categories of MarkDown editors. I called the first one the side by side preview editors. In that case, the window is split into two equal parts, one for editing the text, a second one for the preview.
This is especially efficient if you want to  see the impact of your changes in real time.
This also can be a source of distraction.

The second category provides the preview in a dedicated window. If you have a multi-monitors setup, you can write on one screen and preview on another one.

There is no solution better than the other. It is a matter of choice and depends on your usage.

Combining these two words

Because you shouldn’t choose an editor just for the preview feature, I’ve decided to try to combine both and let to the user, the ability to select the most relevant mode for him.
One of the design principles of SmartDown II is flexibility. You should be able to adapt it to your needs.

Screenshots and video

Yes, it’s better with a screenshot! I will also try in the future to provide shorts videos.

side by side lmarkdown preview
Side by side markdown preview
Markdown preview in an independent window
Markdown preview in an independent window