Concise syntax

Marko's concise syntax is very similar to the HTML syntax, except it's more... concise. Angle brackets are removed, and nesting is indentation-based.

All Marko files are in concise mode by default, and switch to HTML mode once there is a tag that uses the HTML syntax.

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

// identical to

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

Attributes on multiple lines

Attributes may be comma-separated in all Marko tags.

div id="hello", class=["class1", "class2", "class3"], style={ border: "1px solid red" }

Since commas indicate that another attribute is expected, they may be used to spread attributes across multiple lines.

div id="hello" class="world",
  style={ border: "1px solid red" }

By convention, readability is improved if commas are organized at the beginning of each line with attributes.

div
  ,id="hello"
  ,class=["class1", "class2", "class3"]
  ,style={ border: "1px solid red" }
  -- hello

Text

Two or more hyphens (--) followed by whitespace may be used to begin content.

If text immediately follows the hyphens, the content is terminated at the end of the line.

-- Hello world
div -- Hello world

If hyphens are followed by a newline, the content is terminated by the same number of hyphens or at the next dedentation.

--
This is
a bunch of
text at the
root of
the tag
--
details
  --
  since this is normal tag content,
  regular <strong>HTML Mode</strong>
  tags may be used freely.
  --
  summary --
    This content is
    implicitly closed

Tip

There may be more than two hyphens if necessary, but the number hyphens in the open and close must match.

pre
  ---------------------
     ---   ---   ---
   --- -- -- ---  ---
  ---   ---   ---  ---
   ---       ---  ---
    ---     ---  ---
  ---------------------

Root level text

The Marko parser starts out in the concise mode. Therefore, given the following template:

Hello World
Welcome to Marko

The output is:

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

The proper way to include root level text is with code fences.

-- Welcome to Marko

Contributors

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