Markdown Features

Ardo supports all standard Markdown syntax plus some powerful extensions.

Basic Syntax

Headings

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

Emphasis

_italic_ or _italic_
**bold** or **bold**
**_bold and italic_**
~~strikethrough~~

Lists

- Unordered item 1
- Unordered item 2
  - Nested item

1. Ordered item 1
2. Ordered item 2

Links and Images

[Link text](https://example.com)
![Alt text](/path/to/image.png)

GitHub Flavored Markdown

Ardo supports GitHub Flavored Markdown (GFM) out of the box.

Tables

Task Lists

• Write documentation
• Add syntax highlighting
• Deploy to production

Autolinks

URLs are automatically converted to links: https://reactrouter.com

Syntax Highlighting

Code blocks are automatically highlighted using Shiki. The following languages are bundled and work out of the box:

interface User {
  id: string
  name: string
  email: string
}

function greetUser(user: User): string {
  return `Hello, ${user.name}!`
}

Line Highlighting

Highlight specific lines using the {lines} syntax:

function example() {
  const highlighted = true
  const normal = false
  const alsoHighlighted = true
  const highlighted = true
  const notHighlighted = false
}

Line Numbers

Enable line numbers with showLineNumbers:

const first = 1
const second = 2
const third = 3

Title

Add a title to your code block:

export function greet(name: string) {
  return `Hello, ${name}!`
}

Callout Components

Use callout components to highlight important information. These JSX components are auto-registered in MDX files — no import needed.

Custom Titles

You can customize the callout title:

Code Groups

Display multiple code variants in tabs:

function greet(name) {
  return `Hello, ${name}!`
}

function greet(name: string): string {
  return `Hello, ${name}!`
}

def greet(name):
    return f"Hello, {name}!"

ArdoCodeBlock in .tsx Routes

The ArdoCodeBlock component can be used directly in .tsx route files. Just write the code as children — no template literals or special escaping needed:

import { ArdoCodeBlock } from "ardo/ui"

export default function MyPage() {
  return (
    <ArdoCodeBlock language="tsx">
      export function Hello() {
        return <div>Hello world!</div>
      }
    </ArdoCodeBlock>
  )
}

The ardo:codeblock-highlight Vite plugin processes ArdoCodeBlock before the JSX parser runs, so the children can contain any syntax (<, {, >, etc.) without causing errors. Common indentation is stripped automatically.

The code prop and template literal children are also supported:

<ArdoCodeBlock code="const x = 42" language="typescript" />

If the language prop is dynamic (from a variable), build-time highlighting is skipped and the code renders as plain text.

Embedding MDX Snippets with ArdoBareContent

When you import an .mdx file into a .tsx route, it normally renders inside the full Content wrapper (article, header, footer, navigation). To embed it as a plain content snippet, wrap it in ArdoBareContent:

import { ArdoBareContent } from "ardo/ui"
import MySnippet from "./snippet.mdx"

export default function MyPage() {
  return (
    <ArdoBareContent>
      <MySnippet />
    </ArdoBareContent>
  )
}

Custom Components

You can use React components directly in your markdown:

import { MyComponent } from './components/MyComponent'

# My Page

<MyComponent prop="value" />

Frontmatter

Add metadata to your pages using YAML frontmatter:

---
title: Page Title
description: Page description for SEO
layout: doc
sidebar: true
outline: [2, 3]
---

See the Frontmatter Reference for all available options.