Markdown

Markdown is convenient. React makes it even better.

MDX

Our framework leverages MDX to offer a powerful and flexible content authoring experience. It's an advanced Markdown format with React component support.

For example, you can use and import React components inside your markdown like this:

import {QButton} from "@qui/react"

<QButton variant="fill">Hello!</QButton>

Frontmatter is used to add metadata to Markdown files. It's also the only good thing to come from Jekyll. It's placed at the top of the Markdown file enclosed in --- lines. You can access frontmatter variables in the markdown body using the frontmatter keyword enclosed in brackets.

---
title: Example Page
---

# {frontmatter.title}

This is the content of my page.

For a list of each available property, refer to the PageFrontmatter API.

Markdown Features

In addition to standard markdown, QUI Docs also supports GitHub Flavored Markdown (GFM). These extensions make it easier to write rich content with enhanced formatting and functionality. The following features are a mix of standard markdown, GFM, and our own enhancements.

Autolink Headings

Heading elements h2, h3, and h4 create anchor links and comprise the page's Table of Contents.

Font Styles

Syntax	Result
`bold`	bold
`_italic_`	italic
`~~strikethrough~~`	~~strikethrough~~
`code`	`code`

Lists

Lists denote nesting with alternating list styles based on the nesting level.

Ordered Lists

1. Parent
   1. Child
   2. Child
      1. Grandchild
      2. Grandchild
2. Parent
3. Parent

Parent
1. Child
2. Child
  1. Grandchild
  2. Grandchild
Parent
Parent

Unordered Lists

- Parent
  - Child
  - Child
    - Grandchild
    - Grandchild
- Parent
- Parent

Parent
- Child
- Child
  - Grandchild
  - Grandchild
Parent
Parent

Tables

| Syntax    | Description |   Test Text |
| :-------- | :---------: | ----------: |
| Header    |    Title    | Here's this |
| Paragraph |    Text     |    And more |

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more

Code Blocks

```tsx
export function defined<T>(value: T | null | undefined): value is T {
  return typeof value !== "undefined" && value !== null
}
```

export function defined<T>(value: T | null | undefined): value is T {
  return typeof value !== "undefined" && value !== null
}

Links

All relative Markdown links are automatically converted to Remix or React Router links. This means that the target page will be prefetched. When you click on a link, the page will be loaded on the client-side, without making a full page load (SPA routing). For example:

Click [here](/introduction) to learn more.

...will compile to:

import {Link} from "react-router"

Click <Link prefetch="viewport" to="/introduction">here</Link> to learn more.

External Links

Similarly, all links starting with https:// are converted to external links.

Check out the [official documentation](https://react.dev) to learn more.

...will compile to:

Check out the <a href="https://react.dev" target="_blank">here</a> to learn more.

Alerts

Our blockquotes are enhanced to enable inline alerts.

> [!note]
> We recommend that you use [folders](https://remix.run/docs/en/main/file-conventions/routes#folders-for-organization) for organizing your routes.

NOTE

We recommend that you use folders for organizing your routes.

Custom Title

Use a forward slash / to change the title of the alert:

> [!note/Custom Title]
> Neat, a custom title

Custom Title

Neat, a custom title

Alert Variants

Customize the status color using [!tip], [!success], [!warning], or [!caution]:

TIP

We recommend that you use folders for organizing your routes.

SUCCESS

We recommend that you use folders for organizing your routes.

WARNING

We recommend that you use folders for organizing your routes.

CAUTION

We recommend that you use folders for organizing your routes.

Page Setup

Typedoc