Styling basics

Video outline

How do we style documents

To add simple formatting and structure text in our templates we use Markdown. Markdown is a markup language that is very widely used to create formatted text.

A markup language is a system to annotate a text in a way that when the text is processed to display, the markup language is not shown, but only used to format the text. It is designed to be very easy to write and read.

Bold, italics and underlined

Let's have a look at the basic formatting options to make this a bit more tangible

This is **bold**
This is *italic*
This is _underlined_
***_Combination of bold, italics and underlined_***
Output
This is bold This is italic This is underlined Combination of bold, italics and underlined

Lists

You can create an ordered list by using "*" or "-" or "+". The list items will be marked with bullets (small black circles).

* apples
* oranges
* pears
Output
  • apples
  • oranges
  • pears

You can create a numbered list by just adding "1." in front of each item. The list items will then automatically be marked with numbers. This allows you to add some logic to your list. You may not always want to show every list item in all cases and in those cases the numbering will be automatically adjusted.

1. lather
1. rinse
1. repeat
Output
  1. lather
  2. rinse
  3. repeat

Font size

The font tag in combination with the size attribute makes it possible to adjust the size of your text. The size attribute has five possible values: xxs, xs, s, m, l and xl.

{::font size="xl"}General meeting{:/font}

Why do we work with xxs, xs, s, m, l and xl and not with pixels or points 🤔? Because every firm might have their own branding with a specific font they use and standard font size defined in point size. Working with xxs, xs, s, m, l and xl allows the export to be easily adapted taking into account the branding from that firm. The medium font size corresponds to the standard font size defined for a firm.

Indentation

{::indent level="6"}
This text is indented
{:/indent}
{::indent level="8"}
This text is indented
{:/indent}
{::indent level="10"}
This text is indented
{:/indent}
Output

New paragraph

There are a few options available to create new paragraphs in a template:

  • html break tag
  • hmtl paragraph tag

There are small differences in the exact whitespace between the two.

  • stripnewlines tag: removes any newline characters (line breaks) from a string. The tag newline must be used when a break within stripnewlines is needed {% stripnewlines %}