| 1 | # Concise syntax
|
| 2 |
|
| 3 | 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:
|
| 4 |
|
| 5 | _input.marko_
|
| 6 |
|
| 7 | ```marko
|
| 8 | div class="thumbnail"
|
| 9 | img src="https://example.com/thumb.png"
|
| 10 | ```
|
| 11 |
|
| 12 | _output.html_
|
| 13 |
|
| 14 | ```html
|
| 15 | <div class="thumbnail"><img src="https://example.com/thumb.png" /></div>
|
| 16 | ```
|
| 17 |
|
| 18 | ## Shorthand attributes
|
| 19 |
|
| 20 | Marko provides a shorthand for declaring classes and ids on an element:
|
| 21 |
|
| 22 | _input.marko_
|
| 23 |
|
| 24 | ```marko
|
| 25 | div.my-class
|
| 26 | span#my-id
|
| 27 | button#submit.primary.large
|
| 28 | ```
|
| 29 |
|
| 30 | Yields this HTML:
|
| 31 |
|
| 32 | _output.html_
|
| 33 |
|
| 34 | ```html
|
| 35 | <div class="my-class"></div>
|
| 36 | <span id="my-id"></span> <button id="submit" class="primary large"></button>
|
| 37 | ```
|
| 38 |
|
| 39 | > **ProTip:** These shorthand attributes are available within the HTML syntax as well
|
| 40 |
|
| 41 | ## Text
|
| 42 |
|
| 43 | Text in concise mode is denoted by two or more dashes (`--`).
|
| 44 |
|
| 45 | If there is text on the same line following `--`, it is single-line text:
|
| 46 |
|
| 47 | _single-line-text.marko_
|
| 48 |
|
| 49 | ```marko
|
| 50 | -- Hello world
|
| 51 | ```
|
| 52 |
|
| 53 | The dashes can also follow an element to give it a single text node as a child
|
| 54 |
|
| 55 | _single-line-text.marko_
|
| 56 |
|
| 57 | ```marko
|
| 58 | div -- Hello world
|
| 59 | ```
|
| 60 |
|
| 61 | If there is a line break immediately following `--`, everything following the `--` at the current indentation is parsed as multi-line line text.
|
| 62 |
|
| 63 | _multi-line-text.marko_
|
| 64 |
|
| 65 | ```marko
|
| 66 | div
|
| 67 | --
|
| 68 | Hello world
|
| 69 | this text
|
| 70 | is multi-line
|
| 71 |
|
| 72 | div
|
| 73 | --
|
| 74 | this is more
|
| 75 | text
|
| 76 | ```
|
| 77 |
|
| 78 | A multi-line text block can be ended by the same number of dashes that opened it. This allows it to have siblings:
|
| 79 |
|
| 80 | _multi-line-text.marko_
|
| 81 |
|
| 82 | ```marko
|
| 83 | div
|
| 84 | img src="https://example.com/photo.png"
|
| 85 | --
|
| 86 | Hello world
|
| 87 | this text
|
| 88 | is multi-line
|
| 89 | --
|
| 90 | span -- text after
|
| 91 | ```
|
| 92 |
|
| 93 | ### Root level text
|
| 94 |
|
| 95 | 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:
|
| 96 |
|
| 97 | _input.marko_
|
| 98 |
|
| 99 | ```marko
|
| 100 | Hello World
|
| 101 | Welcome to Marko
|
| 102 | ```
|
| 103 |
|
| 104 | The output would be the following:
|
| 105 |
|
| 106 | _output.html_
|
| 107 |
|
| 108 | ```html
|
| 109 | <Hello World></Hello> <Welcome to Marko></Welcome>
|
| 110 | ```
|
| 111 |
|
| 112 | Instead, prefix the lines with `--` so they are parsed as text:
|
| 113 |
|
| 114 | _input.marko_
|
| 115 |
|
| 116 | ```marko
|
| 117 | -- Hello World
|
| 118 | -- Welcome to Marko
|
| 119 | ```
|