0f5e639775
* add prettierignore * switch to eslint:recommended + eslint-config-prettier * fix eslint violations * remove more .jshintrc files * better conditional structure * add prettier and update prettier ignore * add precommit hook to run prettier * add lint check to precommit and format check to ci * format all the things * add generated files * let npm do it's thing with package.json
2.2 KiB
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"
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
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
The dashes can also follow an element to give it a single text node as a child
single-line-text.marko
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
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
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
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