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.
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
- 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.
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).
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:
Choosing a template
Once you’ve defined several templates, you can simply select them by clicking on the view options icon: