1.8

Preview tab
The preview tab shows the template as it will output with the current record (see "Loading data"
on page594), with the personalized content (see "Personalizing Content" on page592).
Although it is possible to edit the template in Preview mode to a certain extent, it is
recommended to do all editing in the Design mode.
Source tab
The source tab displays the HTML source for the template, including HTML Headers, CSS and
HTML code. The source is displayed in a color-coded text editor, to quickly visualize the code.
In this tab changes and adjustments can be made to the code. For shortcuts that can be used in
this editor, see "Text editors: Source tab, JavaScript, CSS, Script Editor" on page742 and
"Emmet" on page362.
To the left of the Source tab, a bar helps visually identify the start and stop of an element. For
example when clicking on the opening <table> element, this bar marks the whole <table> and
all its contents, until the ending </table> tag.
Pretty print options
In the Source view the HTML source of the template is "pretty printed" (that is: formatted, adding
new lines and indentation) to make it more readable.
When this is undesirable, the Source view formatting can be turned off for (parts of) a section by
adding <!-- format:off --> in Source view, at the beginning of the text or in between two
HTML elements. From that point on, pretty printing will be disabled for that section. Use <!--
format:smart --> or <!-- format:auto --> to turn the formatting back on.
These are all format options:
l <!-- format:off --> turns the formatting off.
l <!-- format:smart --> or <!-- format:auto --> turns the formatting back on.
l <!-- format:collapse --> forces the following HTML elements to be collapsed.
l <!-- format:expand --> forces the following HTML elements to be expanded.
Example
This example shows how to turn pretty printing off for one specific HTML element: a Div
element.
Page 770