MDC Syntax

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

# Hello World
<!-- Becomes: <h1 id="hello-world">Hello World</h1> -->

**Bold text**
*Italic text*
***Bold and italic***
~~Strikethrough~~
`Inline code`

[Link text](https://example.com)
[Link with title](https://example.com "Link title")
![Image alt text](https://example.com/image.png)
![Image with title](https://example.com/image.png "Image title")

> This is a blockquote
> It can span multiple lines
>
> And contain other markdown elements like **bold** and *italic*

---
***
___

---
title: My Document Title
author: John Doe
date: 2024-01-15
tags:
  - markdown
  - documentation
depth: 3
searchDepth: 2
custom_field: custom value
---

# Document Content

Your markdown content here...

import { parse } from 'mdc-syntax'

const content = `---
title: My Article
author: Jane Doe
depth: 3
---

# Introduction
Content here...
`

const result = parse(content)
console.log(result.data)
// { title: 'My Article', author: 'Jane Doe', depth: 3 }

::component-name{prop1="value1" prop2="value2"}
Content inside the component

Can have **markdown** and other elements
::

Check out this :icon-star component in the middle of text.

Click the :button[Submit]{type="primary"} to continue.

The status is :badge[Active]{color="green"} right now.

::component{prop="value"}
<!-- Standard key-value pair -->
::

::component{bool}
<!-- Boolean property (becomes :bool="true" in AST) -->
::

::component{#custom-id}
<!-- ID attribute -->
::

::component{.class-name}
<!-- CSS class -->
::

::component{.class-one .class-two}
<!-- Multiple CSS classes -->
::

::component{obj='{"key": "value"}'}
<!-- Object/JSON value -->
::

::component{arr='["item1", "item2"]'}
<!-- Array/JSON value -->
::

::component{multiple="props" bool #id .class}
<!-- Multiple properties combined -->
::

::card
#header
## Card Title

#content
This is the main content of the card

#footer
Footer text here
::

{
  "type": "minimark",
  "value": [
    [
      "card",
      {},
      [
        "template",
        { "name": "header" },
        ["h2", {}, "Card Title"]
      ],
      [
        "template",
        { "name": "content" },
        ["p", {}, "This is the main content of the card"]
      ],
      [
        "template",
        { "name": "footer" },
        ["p", {}, "Footer text here"]
      ]
    ]
  ]
}

:::outer-component
Content in outer

::inner-component{variant="compact"}
Content in inner
::

More content in outer
:::

::level-1
  :::level-2
    ::::level-3
    Content
    ::::
  :::
::

**bold text**{.highlight #important}
**bold text**{data-value="custom"}
**bold text**{bool}

*italic text*{.emphasized}
_italic text_{#custom-id}

[Link text](url){target="_blank" rel="noopener"}
[Link text](url){.button .primary}
[External](https://example.com){target="_blank" .external-link}

![Alt text](image.png){.responsive width="800" height="600"}
![Logo](logo.svg){.logo #site-logo}

`code snippet`{.language-js}
`variable`{data-type="string"}

This is [highlighted text]{.highlight .yellow} in a paragraph.

```javascript
function hello() {
  console.log("Hello, World!")
}
```

```typescript
interface User {
  name: string
  age: number
}
```

```javascript [server.js]
const express = require('express')
const app = express()
```

```javascript {1-3,5}
function example() {
  const a = 1  // Lines 1-3 highlighted
  const b = 2
  const c = 3
  return a + b + c  // Line 5 highlighted
}
```

```javascript {1-3} [utils.ts] meta=value
function hello() {
  console.log("Hello")
}
```

```typescript [@[...slug\].ts]
// Brackets and special chars are supported
// Backslash escapes special characters
```

{
  "type": "minimark",
  "value": [
    [
      "pre",
      {
        "language": "javascript",
        "filename": "server.js",
        "highlights": [1, 2, 3],
        "meta": "meta=value"
      },
      [
        "code",
        { "class": "language-javascript" },
        "code content here"
      ]
    ]
  ]
}

- [x] Completed task
- [ ] Pending task
- [x] Another completed task
  - [ ] Nested pending task
  - [x] Nested completed task

<ul class="contains-task-list">
  <li class="task-list-item">
    <input type="checkbox" disabled checked class="task-list-item-checkbox">
    Completed task
  </li>
  <li class="task-list-item">
    <input type="checkbox" disabled class="task-list-item-checkbox">
    Pending task
  </li>
</ul>

| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Left         | Center         | Right         |
| Text         | Text           | Text          |

| Feature      | Status          | Link                    |
| ------------ | --------------- | ----------------------- |
| **Bold**     | *Italic*        | [Link](https://example) |
| `Code`       | ~~Strike~~      | ![Image](img.png)       |

# Article Title

This is the introduction paragraph that will be used as an excerpt.

<!-- more -->

This is the full article content that won't appear in the excerpt.

const result = parse(content)
console.log(result.excerpt) // Contains content before <!-- more -->
console.log(result.body)    // Contains full content