Markdown

<App layout="horizontal-sticky">
  <Markdown>
    <![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:
 
"To create a heading, add number signs (#) in front of a word or phrase.
The number of number signs you use should correspond to the heading level."
 
Headings give hierarchy to text but sometimes **emphasizing something with bold 
is just enough**.
 
If not bold, then simply *italic letters give visual diversity*.
 
## Exploring Blockquotes
 
As I journeyed further, I encountered blockquotes that spoke of the beauty of 
simplicity:
 
> Blockquotes can contain multiple paragraphs. Add a > on the blank lines between 
> the paragraphs.
> > Like so
 
## The Power of Lists
 
I also discovered the power of lists, which were as versatile as the inhabitants 
of Markdownville:
 
- This is the first list item.
- Here's the second list item.
    - A subsection here would look great below the second list item.
- And here's the third list item.
 
I found that I can create ordered lists as well:
 
1. The first item.
2. The second item.
3. Third item.
 
## The Image
 
Text is not the only thing I found through my journey. The power of images 
materialized in front of me:
 
![Colors image](/resources/images/components/markdown/colors.png)
 
## Navigating with Hyperlinks
 
Hyperlinks, like signposts, marked other paths that branched off from the road 
I was treading:
- [Source of all truth](https://github.com/xmlui-com/xmlui)
- [Back to where we started](https://ncrm.azurewebsites.net/)
 
## The Horizontal Rule
 
In the quiet corners of Markdownville, I found the Horizontal Rule, a line that 
symbolizes the end of a section:
 
***
    ]]>
  </Markdown>
</App>

<App>
  <variable name="x" value="{() => { return 'testing' }}" />
  <Markdown>
    <![CDATA[
  Empty elements are removed: ${}
 
  Nested objects and functions are handled: ${ { a: 1, b: () => {} } }
 
  Function calls are executed: ${x()}
    ]]>
  </Markdown>
</App>

<App>
  <VStack>
    <Items data="{[
      {id: 123, name: 'Peter Parker'},
      {id: 234, name: 'Clark Kent'},
      {id: 345, name: 'Bruce Wayne'}
    ]}">
      <Markdown content="{'## ' + $item.id + '\\n*' + $item.name + '*' }"/>
    </Items>
  </VStack>
</App>

<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>

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "accent-Blockquote": "transparent",
    "backgroundColor-Blockquote": "rgba(27, 195, 50, 0.3)",
    "margin-Blockquote": "8px",
    "padding-Blockquote": "16px",
    "borderRadius-Blockquote": "8px",
    "boxShadow-Blockquote": "5px 10px 5px green"
  }
}

<App>
  <Markdown>
    <![CDATA[
> This text is in a blockquote.
> > This one has an even bigger emphasis, since it is nested.
> > > This one is nested even deeper.
> Continue the original block.
    ]]>
  </Markdown>
</App>

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "borderColor-HorizontalRule": "red",
    "borderWidth-HorizontalRule": "8px",
    "borderStyle-HorizontalRule": "dotted"
  }
}

<App>
  <Markdown>
    <![CDATA[
Section 1
 
---
 
Section 2
    ]]>
  </Markdown>
</App>

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "paddingLeft-ListItem": "40px"
  }
}

<App>  
  <Markdown>
    <![CDATA[
1. Get in the driver's seat and buckle up
2. Insert the key into the ignition
3. Put the gearstick in either the "P" or "N" position
4. Twist the ignition key to start the car
    ]]>
  </Markdown>
</App>

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "paddingLeft-OrderedList": "80px"
  }
}

<App>
  <Markdown>
    <![CDATA[
1. Get in the driver's seat and buckle up
2. Insert the key into the ignition
3. Put the gearstick in either the "P" or "N" position
4. Twist the ignition key to start the car
    ]]>
  </Markdown>
</App>

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "paddingLeft-UnorderedList": "80px"
  }
}

<App>
  <Markdown>
    <![CDATA[
- Get in the driver's seat and buckle up
- Insert the key into the ignition
- Put the gearstick in either the "P" or "N" position
- Twist the ignition key to start the car
- Know that cars may refuse to start for any number of reasons
    - Consult your car's manual
    - Take your car to a mechanic
        - If all else fails, troubleshoot the car yourself
    ]]>
  </Markdown>
</App>