Markdown

Markdown renders formatted text using markdown syntax. Use Text for simple, styled text content, and Markdown when you need rich formatting.

Key features:

Rich formatting: Support for headings, bold, italic, lists, links, images, blockquotes, and code blocks
Dynamic content: Use @{} binding expressions to inject variables and function results
File loading: Load markdown content from external files using the data property

Acquiring content

You can specify Markdown content in these ways.

The content property

Render Markdown content that you calculate or get from other components.

The data property

Render Markdown content from an URL.

Nested text

Render Markdown content that you place directly in a Markdown component.

Whitespace and special characters

Whitespace is significant in Markdown, for example headers using the # syntax must begin in column 1.

These special XML characters are significant too.

< (less than) - Must be escaped as &lt;
> (greater than) - Must be escaped as &gt;
& (ampersand) - Must be escaped as &amp;
" (double quote) - Must be escaped as &quot; in attributes
' (single quote/apostrophe) - Must be escaped as &apos; in attributes

You can use a CDATA section to avoid having to escape these characters individually.

<Markdown>
  <![CDATA[
  ]]>
</Markdown>

Or, as we have done in this page, you can use a code fence (a block delimited by triple backtics) to preserve them.

Supported elements

The Markdown component supports these basic elements.

Heading
Bold
Italic
Strikethrough
Blockquote
Ordered List
Unordered List
Code
Horizontal Rule
Link
Image
Table

See this markdown guide.

Binding Expressions

Our Markdown component is capable of evaluating binding expressions just as other XMLUI components. Use the @{} syntax to wrap expressions that need to be evaluated.

Objects, functions and arrays will be stringified if you place them in Markdown.

Function calls are executed and their return values inlined as strings into markdown.

Example: binding expressions syntax

Properties

`content`

This property sets the markdown content to display. Alternatively, you can nest the markdown content as a child in a CDATA section. In neither this property value nor any child is defined, empty content is displayed.

Use this property when the text you provide is not static but a result of calculations (you assemble the text or get it from other components).

`removeIndents` (default: true)

This boolean property specifies whether leading indents should be removed from the markdown content. If set to true, the shortest indent found at the start of the content lines is removed from the beginning of every line.

<App layout="horizontal-sticky" padding="1rem">
  <Markdown removeIndents="true">
    <![CDATA[
      # My Adventure in Markdown Land

      ## The Beginning

      In the bustling city of Markdownville, I embarked on a journey to
      discover the secrets of Markdown. My adventure started in the heart
      of the city, where the first rule of Markdown was inscribed in stone.
    ]]>
  </Markdown>
</App>

Example: removeIndents property

<App layout="horizontal-sticky" padding="1rem">
  <Markdown removeIndents="true">
    <![CDATA[
      # My Adventure in Markdown Land

      ## The Beginning

      In the bustling city of Markdownville, I embarked on a journey to
      discover the secrets of Markdown. My adventure started in the heart
      of the city, where the first rule of Markdown was inscribed in stone.
    ]]>
  </Markdown>
</App>

`showHeadingAnchors`

This boolean property specifies whether heading anchors should be displayed. If set to true, heading anchors will be displayed on hover next to headings.

If this property is not set, the engine checks if showHeadingAnchors flag is turned on in the global configuration (in the appGlobals configuration object) and displays the heading anchor accordingly.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The component itself cannot be styled, but the components that render the final text have customizable style variables.

Text Heading Link Image Checkbox

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
backgroundColor-Admonition	$color-primary-100	$color-primary-200
backgroundColor-Admonition-danger	$color-danger-100	$color-danger-100
backgroundColor-Admonition-info	none	none
backgroundColor-Admonition-note	none	none
backgroundColor-Admonition-tip	none	none
backgroundColor-Admonition-warning	$color-warn-100	$color-warn-100
backgroundColor-Blockquote	$color-surface-100	$color-surface-50
backgroundColor-Markdown	none	none
backgroundColor-Text	none	none
border-Admonition	1px solid $color-primary-300	1px solid $color-primary-300
border-Blockquote	none	none
borderBottom-Admonition	none	none
borderBottom-Blockquote	none	none
borderBottomColor-Admonition	none	none
borderBottomColor-Blockquote	none	none
borderBottomStyle-Admonition	none	none
borderBottomStyle-Blockquote	none	none
borderBottomWidth-Admonition	none	none
borderBottomWidth-Blockquote	none	none
borderColor-Admonition	none	none
borderColor-Admonition-danger	$color-danger-300	$color-danger-300
borderColor-Admonition-info	none	none
borderColor-Admonition-note	none	none
borderColor-Admonition-tip	none	none
borderColor-Admonition-warning	$color-warn-300	$color-warn-300
borderColor-Blockquote	none	none
borderColor-HorizontalRule	none	none
borderEndEndRadius-Admonition	none	none
borderEndEndRadius-Blockquote	none	none
borderEndStartRadius-Admonition	none	none
borderEndStartRadius-Blockquote	none	none
borderHorizontal-Admonition	none	none
borderHorizontal-Blockquote	none	none
borderHorizontalColor-Admonition	none	none
borderHorizontalColor-Blockquote	none	none
borderHorizontalStyle-Admonition	none	none
borderHorizontalStyle-Blockquote	none	none
borderHorizontalWidth-Admonition	none	none
borderHorizontalWidth-Blockquote	none	none
borderLeft-Admonition	none	none
borderLeft-Blockquote	none	none
color-Admonition	none	none
color-Blockquote	none	none
borderLeftStyle-Admonition	none	none
borderLeftStyle-Blockquote	none	none
borderLeftWidth-Admonition	none	none
borderLeftWidth-Blockquote	none	none
borderRadius-Admonition	$space-2	$space-2
borderRadius-Blockquote	none	none
borderRight-Admonition	none	none
borderRight-Blockquote	none	none
color-Admonition	none	none
color-Blockquote	none	none
borderRightStyle-Admonition	none	none
borderRightStyle-Blockquote	none	none
borderRightWidth-Admonition	none	none
borderRightWidth-Blockquote	none	none
borderStartEndRadius-Admonition	none	none
borderStartEndRadius-Blockquote	none	none
borderStartStartRadius-Admonition	none	none
borderStartStartRadius-Blockquote	none	none
borderStyle-Admonition	none	none
borderStyle-Blockquote	none	none
borderStyle-HorizontalRule	none	none
borderTop-Admonition	none	none
borderTop-Blockquote	none	none
borderTopColor-Admonition	none	none
borderTopColor-Blockquote	none	none
borderTopStyle-Admonition	none	none
borderTopStyle-Blockquote	none	none
borderTopWidth-Admonition	none	none
borderTopWidth-Blockquote	none	none
borderHorizontal-Admonition	none	none
borderHorizontal-Blockquote	none	none
borderVerticalColor-Admonition	none	none
borderVerticalColor-Blockquote	none	none
borderVerticalStyle-Admonition	none	none
borderVerticalStyle-Blockquote	none	none
borderVerticalWidth-Admonition	none	none
borderVerticalWidth-Blockquote	none	none
borderWidth-Admonition	none	none
borderWidth-Blockquote	none	none
borderWidth-HorizontalRule	none	none
color-accent-Blockquote	$color-surface-500	$color-surface-500
direction-Text	none	none
fontFamily-Text	none	none
fontSize-H1-markdown	none	none
fontSize-Text	none	none
fontStretch-Text	none	none
fontStyle-Text	none	none
fontVariant-Text	none	none
fontWeight-Text	none	none
letterSpacing-Text	none	none
lineBreak-Text	none	none
lineHeight-Text	none	none
marginBottom-Admonition	$space-7	$space-7
marginBottom-Blockquote	$space-7	$space-7
marginBottom-H1-markdown	none	none
marginBottom-H2-markdown	none	none
marginBottom-H3-markdown	none	none
marginBottom-H4-markdown	none	none
marginBottom-H5-markdown	none	none
marginBottom-H6-markdown	none	none
marginBottom-HtmlLi	$space-2_5	$space-2_5
marginBottom-HtmlVideo	none	none
marginBottom-Image-markdown	$space-4	$space-4
marginLeft-Admonition-content	$space-1_5	$space-1_5
marginLeft-Image-markdown	$space-0	$space-0
marginRight-Image-markdown	$space-0	$space-0
marginTop-Admonition	$space-7	$space-7
marginTop-Blockquote	$space-7	$space-7
marginTop-H1-markdown	none	none
marginTop-H2-markdown	none	none
marginTop-H3-markdown	none	none
marginTop-H4-markdown	none	none
marginTop-H5-markdown	none	none
marginTop-H6-markdown	none	none
marginTop-HtmlLi	$space-2_5	$space-2_5
marginTop-HtmlVideo	none	none
marginTop-Image-markdown	$space-4	$space-4
padding-Admonition	none	none
padding-Blockquote	none	none
paddingBottom-Admonition	$space-2	$space-2
paddingBottom-Blockquote	$space-2_5	$space-2_5
paddingBottom-Markdown	none	none
paddingHorizontal-Admonition	none	none
paddingHorizontal-Blockquote	$space-6	$space-6
paddingLeft-Admonition	$space-2	$space-2
paddingLeft-Blockquote	none	none
paddingRight-Admonition	$space-6	$space-6
paddingRight-Blockquote	none	none
paddingTop-Admonition	$space-3	$space-3
paddingTop-Blockquote	$space-3	$space-3
paddingTop-Markdown	none	none
paddingVertical-Admonition	none	none
paddingVertical-Blockquote	none	none
size-icon-Admonition	$space-5	$space-5
textAlign-Text	none	none
textAlignLast-Text	none	none
textColor-Text	none	none
textDecorationColor-Text	none	none
textDecorationLine-Text	none	none
textDecorationStyle-Text	none	none
textDecorationThickness-Text	none	none
textIndent-Text	none	none
textShadow-Text	none	none
textTransform-Text	none	none
textUnderlineOffset-Text	none	none
width-accent-Blockquote	3px	3px
wordBreak-Text	none	none
wordSpacing-Text	none	none
wordWrap-Text	none	none
writingMode-Text	none	none