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:

div class="thumbnail"
    img src="https://example.com/thumb.png"

div.thumbnail
  img src="https://example.com/thumb.png"

<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:

div.my-class
span#my-id
button#submitprimary.large

div.my-class
span#my-id
button.large#submitprimary

Yields this 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

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

<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:

-- Hello world

-- Hello world

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

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.

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:

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:

Hello World
Welcome to Marko

Hello World
Welcome to Marko

The output would be the following:

<Hello World></Hello> <Welcome to Marko></Welcome>

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

-- 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.

LuLaValvamlrawlings

+

You?