Markdown

Learn about how QUI Docs can enhance your Markdown authoring experience.

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 {Button} from "@qualcomm-ui/react/button"

<Button emphasis="primary" variant="fill">
  Hello!
</Button>

Frontmatter is used to add metadata to Markdown files. 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

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.

Spoilers

Surround your content with a spoiler to hide it until the user clicks on the button:

::: spoiler Click to reveal

I'm a spoiler!

:::

Steps

Added in:

Add a step indicator to headings using the ::: steps directive. By default, heading levels h2-h4 are given step indicators. You can change this by supplying the heading level range on the directive:

::: steps h2: only h2 headings will show the step indicator
::: steps h2-h3: only h2 and h3 headings will show the step indicator

Example

::: steps

#### Step 1

Prerequisites:

- Node.js >= 22.19.0

#### Step 2

```shell
pnpm install -D @qualcomm-ui/esbuild
```

::: /steps

Result:

Step 1

Prerequisites:

Node.js >= 22.19.0

Step 2

pnpm install -D @qualcomm-ui/esbuild

Code Blocks

Code blocks are syntax highlighted using Shiki. We've enabled most common transformers by default, detailed below:

Diff Notation

Use [!code ++] and [!code --] to mark added and removed lines.

```ts
console.log("hewwo") // [!code --]
console.log("hello") // [!code ++]
console.log("goodbye")
```

console.log("hewwo") 
console.log("hello") 
console.log("goodbye")

Line Highlighting

Use [!code highlight] to highlight a line.

```ts
console.log("Not highlighted")
console.log("Highlighted") // [!code highlight]
console.log("Not highlighted")
```

console.log("Not highlighted")
console.log("Highlighted") 
console.log("Not highlighted")

You can also highlight multiple lines with a single comment:

```ts
// [!code highlight:2]
console.log("Highlighted")
console.log("Highlighted")
console.log("Not highlighted")
```

console.log("Highlighted")
console.log("Highlighted")
console.log("Not highlighted")

Word Highlighting

Use [!code word:Hello] to highlight the word Hello in any subsequent code.

```ts
// [!code word:Hello]
const message = "Hello World"
console.log(message) // prints Hello World
```

const message = "Hello World"
console.log(message) // prints Hello World

Line Focus

Use [!code focus] to focus a line.

```ts
console.log("Not focused")
console.log("Focused") // [!code focus]
console.log("Not focused")
```

console.log("Not focused")
console.log("Focused") 
console.log("Not focused")

You can also focus multiple lines with a single comment:

```ts
// [!code focus:2]
console.log("Focused")
console.log("Focused")
console.log("Not focused")
```

console.log("Focused")
console.log("Focused")
console.log("Not focused")

Error Levels

Use [!code error] and [!code warning] to mark a line with error and warning levels.

```ts
console.log("No errors or warnings")
console.error("Error") // [!code error]
console.warn("Warning") // [!code warning]
```

console.log("No errors or warnings")
console.error("Error") 
console.warn("Warning")

Hide lines

Use [!code hide] to hide a line. Hidden lines are excluded from both the rendered output and clipboard when copied.

```ts
console.log("Not hidden")
console.log("Hidden") // [!code hide]
console.log("Not hidden")
```

console.log("Not hidden")
console.log("Not hidden")

You can also hide multiple lines with a single comment:

```ts
// [!code hide:2]
console.log("Hidden")
console.log("Hidden")
console.log("Not hidden")
```

console.log("Not hidden")

Last updated on Apr 8, 2026 by Ryan Bower

Page Setup

Typedoc