Markdown guide

**Bold text** and *italic text*

~~Strikethrough text~~

`Inline code`

> Blockquotes for callouts and emphasis

# Page title (H1)
## Section heading (H2)  
### Subsection heading (H3)

- Bulleted lists
- With multiple items

1. Numbered lists
2. In sequential order

[Link text](./relative-page.md)
[External link](https://example.com)

![Image alt text](./images/screenshot.png)

```javascript
// Syntax highlighting for many languages
function example() {
  return "Hello world";
}
```

---
seo:
  title: Custom page title
  description: Page description for search engines
---

```javascript {% title="app.js" highlight="{2,4-6}" %}
function processData() {
  const data = fetchData();

  if (!data) { //  //
    throw new Error('No data'); //  //
  } //  //

  return data.map(item => ({ //  //
    id: item.id, //  //
    name: item.name //  //
  })); //  //
}
```

```treeview
.
├── guides/                 # Guides
│   ├── guide-1.md
│   └── guide-2.md
├── images/                 # Various shared images
│   ├── favicon.png
│   └── header-image.png
├── tutorials/              # Tutorials
│   ├── tutorial-1.md
│   ├── tutorial-2.md
│   ├── index.md
│   └── sidebars.yaml       # Sidebar specific to the 'tutorials' section
├── static/                 # Static assets copied directly to build output
│   └── robots.txt
├── index.page.tsx          # Custom React component for the landing page
├── package.json            # Node.js project manifest
└── redocly.yaml            # Main Redocly configuration file
```

.├──guides/                 # Guides│   ├──guide-1.md│   └──guide-2.md├──images/                 # Various shared images│   ├──favicon.png│   └──header-image.png├──tutorials/              # Tutorials│   ├──tutorial-1.md│   ├──tutorial-2.md│   ├──index.md│   └──sidebars.yaml       # Sidebar specific to the 'tutorials' section├──static/                 # Static assets copied directly to build output│   └──robots.txt├──index.page.tsx          # Custom React component for the landing page├──package.json            # Node.js project manifest└──redocly.yaml            # Main Redocly configuration file

```mermaid
graph TD
    A[User Request] --> B{Authentication}
    B -->|Valid| C[Process Request]
    B -->|Invalid| D[Return Error]
    C --> E[Return Response]
```

{% tabs %}
{% tab label="Option A" %}
Content for the first tab.
{% /tab %}
{% tab label="Option B" %}
Content for the second tab.
{% /tab %}
{% /tabs %}

{% admonition type="info" name="Important note" %}
This is an informational callout with custom styling.
{% /admonition %}

{% cards %}
{% card title="Feature 1" icon="star" to="./feature-1.md" %}
Description of the first feature.
{% /card %}
{% card title="Feature 2" icon="gear" to="./feature-2.md" %}
Description of the second feature.
{% /card %}
{% /cards %}

{% img src="./images/screenshot.png" alt="Application screenshot" width="400" withLightbox=true %}
A screenshot showing the main application interface.
{% /img %}

{% icon name="star" /%} Highlighted feature
{% icon name="warning" color="orange" /%} Important note

{% code-snippet file="./examples/sample.js" title="Sample code" /%}

{% markdoc-example %}
This shows how Markdoc syntax renders in practice.
{% /markdoc-example %}

{% code-group %}
  ```js {% title="users.js" %}
  fetch('/api/users')
    .then(response => response.json())
    .then(data => console.log(data));
  ```
  ```python {% title="users.py" %}
  import requests
  response = requests.get('/api/users')
  data = response.json()
  print(data)
  ```
{% /code-group %}

{% partial file="/_partials/shared-section.md" /%}

{% openapi-code-sample 
   path="/users" 
   method="post" 
   lang="javascript" /%}

{% json-schema schema="user-schema.json" /%}

{% table %}
- Column 1
- Column 2  
- Column 3
---
- Row 1, Cell 1
- Row 1, Cell 2
- Row 1, Cell 3
---
- Row 2, Cell 1
- Row 2, Cell 2
- Row 2, Cell 3
{% /table %}