Markdown component
Markdown is a shorthand that lets you quickly format text. With the Markdown component, you can use Markdown in scripts to quickly write lists, headings, and any other element that Markdown supports.
- Click Markdown in the component toolbar.
- Use Markdown syntax to add text to your script.
The Markdown component supports the full set of Markdown syntax but does not support HTML. Scripts also extend the official Markdown syntax with the following functionality:
Description Syntax Examples Strikethrough text ~~strikethrough~~
Emojis
For available emojis, search the web for “github markdown emoji”
:smiley: :sunglasses:
Tables
For more information about table formatting, search the web for “github markdown tables”
| Heading | Heading 2 | Heading 3 || ——–| ——–| ——–|| content | content | content |Colored text
[text to color](#color red)
[text to color](#color #FF0000)
Highlighted text
[text to highlight](#highlight yellow)
[text to highlight](#highlight #FFFF00)
Change font size
[text to change font size](#font-size 15px)
[text to change font size](#font-size 2em)
[text to change font size](#font-size 200%)
Combined text formatting
[text to format](#font-size 22px, #color red, #highlight yellow)
- Optionally, set the properties of the component.
Common
The Text setting allows you to add text to your markdown.
- Optionally, click Insert Variable to select or create a variable.
- Type the text in the box.
The Size setting allows you to configure the size of your markdown text.
Layout
Configures width to a fixed size, to grow as needed to display content, or to consume as much space as possible relative to other components, using weighting to influence size adjustments.
- Auto-sizing configures the component to shrink or grow in accordance with its contents. For example, the width of a label can grow depending up on how much text it contains.
- Stretch allows a component to consume as much space as possible relative to other components, using weighting to influence size adjustments.Note: If two components are both set to stretch, they are both allocated 50% of the remaining space by default. This proportion can be adjusted by changing the weight value. For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.
- px sets a fixed size in pixels. You can type an integer value into the box, or use up or down arrows to increment or decrement size. These arrows are visible when the component has focus.
Configures height to a fixed size, to grow as needed to display content, or to consume as much space as possible relative to other components, using weighting to influence size adjustments.
- Auto-sizing configures the component to shrink or grow in accordance with its contents. For example, the width of a label can grow depending up on how much text it contains.
- Stretch allows a component to consume as much space as possible relative to other components, using weighting to influence size adjustments.Note: If two components are both set to stretch, they are both allocated 50% of the remaining space by default. This proportion can be adjusted by changing the weight value. For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.
- px sets a fixed size in pixels. You can type an integer value into the box, or use up or down arrows to increment or decrement size. These arrows are visible when the component has focus.
Aligns a component to the left, right, or center, relative to its parent container.
Auto Sizing. To correct this, set the parent container's Height to Stretch or to a fixed height in Pixels.Margins set left, right, top, and bottom spacing around a border.
- Click the value field for a margin. A spin control appears in that field.
- Use the spin control to increase or decrease the margin.
- To update all margin values at once, click the Set All button for Margin in the properties panel.
The Visible property sets the visibility of a component based on the value of a Boolean (True or False) variable or an expression.
To set the Visible property based on a variable:
- Click the Layout property group in the Properties panel.
- Under Visible, click Select Variable.
- Select a variable, or optionally create a new Yes/No variable and then assign that new variable to the Visible property.
- At runtime, the component is visible when the value of the variable is True. Conversely it is hidden when the variable's value is False.
To set the Visible property based on an expression:
- Click the Layout property group in the Properties panel.
- Under Visible, select True/False Expression.
- In the Insert Variable box, enter an expression .
At runtime, the component is visible when the expression is True. The component is hidden when the expression is False.
Accessibility
Live Region is a Yes/Not toggle that allows screen readers to automatically announce all content changes in the component.
[NEXT] Was this article helpful?
Get user feedback about articles.