XMLUI codefences and playgrounds

You can use the xmlui directive for a plain codefence with XMLUI syntax highlighting. This markup:

```xmlui
<Button label="Hello World" onClick="toast('click')/">
```

produces this rendering:

<Button label="Hello World" onClick="toast('click')/">

Or you can use the xmlui-pg directive to define a live XMLUI playground. This markup:

ˋˋˋxmlui-pg
<Button label="Hello World" onClick="toast('click')"/>
ˋˋˋ

produces this playground:

See Reproducible XMLUI for an overview of how these playgrounds support the XMLUI documentation and also enable XMLUI developers to share issues and bug reports in a reproducible way.

If you click the popout icon on the playground above you land in this playground where you can run and modify the app. Changes you make there won't persist in the URL, but you can use this codefence authoring tool to write playgrounds that do produce persistent shareable URLs.

The xmlui and xmlui-pg codefences in this document use an alternate Unicode character to represent the backtic so the codefences shown here can display without interpretation. If you copy these examples into the codefence authoring tool you'll need to replace them with real backtics.

Application context

Use the ---app directive to show a complete app with full App context and a specified height. This markup:

`ˋˋxmlui-pg height="160px"
---app
<App>
  <NavPanel>
    <NavLink label="Home" to="/" />
    <NavLink label="Page 2" to="/page2" />
  </NavPanel>
  <Pages>
    <Page url="/">
      <Button label="Hello World" onClick="toast('click')" />
    </Page>
    <Page url="/page2">
      <Text>page 2</Text>
    </Page>
  </Pages>
</App>
ˋˋˋ

produces this rendering:

Component context

Use the ---comp directive to define a component. This markup:

`ˋˋxmlui-pg height="160px"
---app
<App>
  <NavPanel>
    <NavLink label="Home" to="/" />
    <NavLink label="Page 2" to="/page2" />
  </NavPanel>
  <Pages>
    <Page url="/">
      <HelloButton />
    </Page>
    <Page url="/page2">
      <Text>page 2</Text>
    </Page>
  </Pages>
</App>
---comp
<Component name="HelloButton">
  <Button label="Hello World" onClick="toast('click')" />
</Component>
ˋˋˋ

produces this rendering:

Description block

Use the ---desc directive to add Markdown-based comments between blocks.

Use display with ---app or ---comp to display the source of a block.

This markup:

`ˋˋxmlui-pg height="160px"
---app display
<App>
  <NavPanel>
    <NavLink label="Home" to="/" />
    <NavLink label="Page 2" to="/page2" />
  </NavPanel>
  <Pages>
    <Page url="/">
      <HelloButton />
    </Page>
    <Page url="/page2">
      <Text>page 2</Text>
    </Page>
  </Pages>
</App>
---desc
We define a `HelloButton` component for use in the app.
---comp display
<Component name="HelloButton">
  <Button label="Hello World" onClick="toast('click')" />
</Component>
ˋˋˋ

produces this rendering:

<App>
  <NavPanel>
    <NavLink label="Home" to="/" />
    <NavLink label="Page 2" to="/page2" />
  </NavPanel>
  <Pages>
    <Page url="/">
      <HelloButton />
    </Page>
    <Page url="/page2">
      <Text>page 2</Text>
    </Page>
  </Pages>
</App>

We define a HelloButton component for use in the app.

<Component name="HelloButton">
  <Button label="Hello World" onClick="toast('click')" />
</Component>

<App>
  <NavPanel>
    <NavLink label="Home" to="/" />
    <NavLink label="Page 2" to="/page2" />
  </NavPanel>
  <Pages>
    <Page url="/">
      <HelloButton />
    </Page>
    <Page url="/page2">
      <Text>page 2</Text>
    </Page>
  </Pages>
</App>

We define a HelloButton component for use in the app.

<Component name="HelloButton">
  <Button label="Hello World" onClick="toast('click')" />
</Component>

API configuration

Use the ---api directive to define an API. This markup:

`ˋˋxmlui-pg name="list of fruits"
---app
<App>
  <List data="/api/fruits" />
</App>
---api
{
  "apiUrl": "/api",
  "initialize": "$state.fruits = [
    { id: 1, name: 'Orange' },
    { id: 2, name: 'Apple' },
    { id: 3, name: 'Pear' },
  ]",
  "operations": {
    "get-fruits": {
      "url": "/fruits",
      "method": "get",
      "handler": "return $state.fruits;"
    }
  }
}
ˋˋˋ

produces this rendering:

list of fruits

Supported modifiers

display

Use display to show source. This markup:

ˋˋˋxmlui-pg
---app display
<App>
  <Button label="Hello World" />
</App>
ˋˋˋ

produces this playground:

<App>
  <Button label="Hello World" />
</App>

<App>
  <Button label="Hello World" />
</App>

copy

Use copy with display to add a button that copies the source.

ˋˋˋxmlui-pg
---app display copy
<App>
  <Button label="Hello World" />
</App>
ˋˋˋ

produces this playground:

<App>
  <Button label="Hello World" />
</App>

<App>
  <Button label="Hello World" />
</App>

name

Provides a descriptive name for the example.

This markup:

ˋˋˋxmlui-pg  name="Named example"
---app
<App>
  <Text>This is a named example
</App>
ˋˋˋ

produces this playground:

<App>
  <Text>This is a named example</Text>
</App>

<App>
  <Text>This is a named example</Text>
</App>

filename

Specifies a filename for the code block, useful for multi-file examples or showing file context.

This markup:

```xmlui filename="Main.xmlui"
<App>
  <Button label="Main App" />
</App>
```

produces this rendering:

Main.xmlui

<App>
  <Button label="Main App" />
</App>

Highlighting

You can highlight whole lines or parts of lines.

Single line

This markup:

ˋˋˋxmlui-pg
---app display {3}
<App>
  <VStack>
    <Button label="This line is highlighted" />
  </VStack>
</App>
ˋˋˋ

produces this rendering:

<App>
  <VStack>
    <Button label="This line is highlighted" />
  </VStack>
</App>

<App>
  <VStack>
    <Button label="This line is highlighted" />
  </VStack>
</App>

Multiple lines (comma-separated)

This markup:

ˋˋˋxmlui-pg
---app display {3, 4}
<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>
ˋˋˋ

produces this rendering:

<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>

<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>

Line ranges

This markup:

ˋˋˋxmlui-pg
---app display {3-5}
<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>
ˋˋˋ

produces this rendering:

<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>

<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>

Mixed ranges and individual lines

This markup:

ˋˋˋxmlui-pg
---app display {1, 3-5, 7}
<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>
ˋˋˋ

produces this rendering:

<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>

<App>
  <VStack>
    <Button label="Button 1" />
    <Button label="Button 2" />
    <Button label="Button 3" />
  </VStack>
</App>

Matches

Attribute name and value

This markup:

ˋˋˋxmlui-pg
---app display  /variant="outlined"/
<App>
  <Button label="Highlighted Attribute" variant="outlined" themeColor="primary" />
</App>
ˋˋˋ

produces this rendering:

<App>
  <Button label="Highlighted Attribute" variant="outlined" themeColor="primary" />
</App>

<App>
  <Button label="Highlighted Attribute" variant="outlined" themeColor="primary" />
</App>

Attribute names

This markup:

ˋˋˋxmlui-pg
---app display  /name/ /size/
<App>
    <Icon name="star" size="lg" />
</App>
```

produces this rendering:

<App>
  <Icon name="star" size="lg" />
</App>

<App>
  <Icon name="star" size="lg" />
</App>

Red border highlighting

Use ! before the forward slash delimiters produces a red border instead of the standard highlight.

This markup:

```xmlui !/{ 6 * 7 }/
---app display !/{ 6 * 7 }/
<App>
  <Text value="Life, the universe, and everything: { 6 * 7 }" />
</App>
```

produces this rendering:

<App>
  <Text value="Life, the universe, and everything: { 6 * 7 }" />
</App>

<App>
  <Text value="Life, the universe, and everything: { 6 * 7 }" />
</App>

Modifier combinations

Modifiers can be combined in various ways.

copy display - Shows both code and rendered output with copy functionality
display noHeader - Display without header section
{lines} copy - Copyable code with line highlighting
/pattern/ copy - Pattern highlighting with copy button
copy display name="..." - Named example with copy and display
copy display name="..." height="..." - Full-featured playground with custom height
copy display name="..." /pattern/ - Named example with pattern highlighting

Quick reference

Fence Types

Type	Purpose
`xmlui`	Standard XMLUI code display
`xmlui-pg`	Interactive playground
`---app`	Application context in multi-file examples
`---comp`	Component context in multi-file examples
`---api`	Mock API configuration (JSON)
`---desc`	Narrative description block

Modifiers

Modifier	Effect
`copy`	Adds copy button
`display`	Shows rendered output
`noHeader`	Hides header section
`name="..."`	Sets example title
`height="XXXpx"`	Sets container height
`filename="..."`	Shows filename context

Highlighting

Syntax	Purpose
`{3}`	Highlight line 3
`{2,4,6}`	Highlight multiple lines
`{2-4}`	Highlight line range
`{2-4, 7}`	Mixed ranges and individual lines
`/pattern/`	Highlight pattern matches
`!/pattern/`	Red border highlight for pattern