Marko

Concise syntax

Marko's concise syntax is very similar to the HTML syntax, except it's more... concise. Essentially, you take an HTML tag, remove the angle brackets (<>) and use indentation rather than a closing tag:

input.marko
div class="thumbnail"
    img src="https://example.com/thumb.png"
div class="thumbnail"
    img src="https://example.com/thumb.png"
output.html
<div class="thumbnail"><img src="https://example.com/thumb.png" /></div>

Shorthand attributes

Marko provides a shorthand for declaring classes and ids on an element:

input.marko
div.my-class
span#my-id
button#submit.primary.large
div.my-class
span#my-id
button#submit.primary.large

Yields this HTML:

output.html
<div class="my-class"></div>
<span id="my-id"></span> <button id="submit" class="primary large"></button>

ProTip: These shorthand attributes are available within the HTML syntax as well

Text

Text in concise mode is denoted by two or more dashes (--).

If there is text on the same line following --, it is single-line text:

single-line-text.marko
-- Hello world
-- Hello world

The dashes can also follow an element to give it a single text node as a child

single-line-text.marko
div -- Hello world
div -- Hello world

If there is a line break immediately following --, everything following the -- at the current indentation is parsed as multi-line line text.

multi-line-text.marko
div
    --
    Hello world
    this text
    is multi-line

div
    --
    this is more
    text
div
    ---
    Hello world
    this text
    is multi-line
    ---
div
    ---
    this is more
    text
    ---

A multi-line text block can be ended by the same number of dashes that opened it. This allows it to have siblings:

multi-line-text.marko
div
    img src="https://example.com/photo.png"
    --
    Hello world
    this text
    is multi-line
    --
    span -- text after
div
    ---
    <img src="https://example.com/photo.png"/>Hello world
    this text
    is multi-line<span>text after</span>
    ---

Root level text

There is one "gotcha" that you need to be aware of. The Marko parser starts out in the concise mode. Therefore, given the following template:

input.marko
Hello World
Welcome to Marko
Hello World
Welcome to Marko

The output would be the following:

output.html
<Hello World></Hello> <Welcome to Marko></Welcome>

Instead, prefix the lines with -- so they are parsed as text:

input.marko
-- Hello World
-- Welcome to Marko
-- Hello WorldWelcome to Marko
EDIT

Contributors

Helpful? You can thank these awesome people! You can also edit this doc if you see any issues or want to improve it.

Chat in Marko's Discord Server