Language

Blocks

What a block becomes, closing, names, brackets as text and arcm- props.

What a block becomes

The name decides it:

• An HTML, SVG or MathML name ([section], [svg]): that element.
• A name with a dash ([my-widget]): a custom element.
• An imported name ([Card]): the component's output. See Components.
• A built-in name ([for-each], [doctype!]…): its job. See Built-in blocks.

[my-widget = size: "2"]Custom[end]
[svg = viewBox: "0 0 10 10"]
  [circle = cx: 5, cy: 5, r: 4 !]
[end]

<my-widget size="2">Custom</my-widget>
<svg viewBox="0 0 10 10">
  <circle cx="5" cy="5" r="4"></circle>
</svg>

Closing

[end] closes the last open block. [end:name] does the same, and checks the name:

[p]
  A [b]bold[end:b] word.
[end:p]

Try it: change [end:b] to [end:p], or delete the last line, and press Run.

On one line or many

Blocks sit inside text, or across lines. Both give the same elements:

[p]Read the [a = href: "/docs"]docs[end] first.[end]
[ul]
  [li]One[end]
  [li]Two[end]
[end]

<p>Read the <a href="/docs">docs</a> first.</p>
<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Names

• Write HTML tags in lowercase: [div], not [DIV].
• A capital first letter means a component. If it isn't imported, you get a warning.
• A name ArcMoon doesn't know still becomes a tag, with a warning.

⚠ page.arcm:1:1  [dvi] is not an HTML element or an imported component (did you mean [div]?)
⚠ page.arcm:2:1  [A] is not imported; it is written as <a>. Did you forget [import = A: "./A.arcm" !]?

Brackets as text

[ starts a block only when a name comes right after it. Otherwise it is text:

[p][ 1, 2, 3 ] and ["key"] stay text[end]
[p]\[p] needs a backslash[end]

<p>[ 1, 2, 3 ] and ["key"] stay text</p>
<p>[p] needs a backslash</p>

arcm- props

Props starting with arcm- tell ArcMoon something. They are not written as attributes:

• arcm-raw: true: the body is written as it is, without reading blocks or comments.
• arcm-ref: "name" and arcm-shared-ref: "name": find the element from runtime code. See Runtime code.
• arcm-syntax: "css" (experimental): a hint for editors. No editor uses it yet, and nothing changes in the output.

[pre = arcm-raw: true][b] # stays as written[end]

<pre>[b] # stays as written</pre>