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.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#submitprimary.large
div.my-class
span#my-id
button.large#submitprimary

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

Attributes on multiple lines

If a component has lots of attributes, you can spread them across multiple lines by surrounding them with square brackets

input.marko
div [
    id="hello"
    class=["class1", "class2", "class3"]
    style={ border: "1px solid red" }
] -- hello
div#hello class=["class1", "class2", "class3"] style={ border: "1px solid red" }
  -- hello
output.html
<div id="hello" class="class1 class2 class3" style="border:1px solid red">
  hello
</div>

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

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 on GitHub

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