Documentation

Prose

Typography components for markdown content rendering

Prose Components

Prose components automatically style standard markdown elements. They are applied by Nuxt Content during rendering and don't require any special MDC syntax.

Headings

ProseH1

Applied to # headings.

Heading 1

# Heading 1

Styling: text-3xl font-bold tracking-tight

ProseH2

Applied to ## headings.

Heading 2

## Heading 2

Styling: text-2xl font-semibold tracking-tight with bottom border

ProseH3

Applied to ### headings.

Heading 3

### Heading 3

Styling: text-xl font-semibold tracking-tight

ProseH4 - H6

Applied to ####, #####, and ###### headings with decreasing emphasis.

Text Elements

ProseP

Applied to paragraphs.

This is a paragraph of text with proper line height and spacing.

Styling: leading-7 with top margin on non-first paragraphs

ProseA

Applied to links.

This is a link

[This is a link](/docs/components)

Styling: font-medium underline underline-offset-4

ProseCode

Applied to inline code.

Use the useState hook for state management.

Use the `useState` hook for state management.

Styling: bg-muted rounded font-mono text-sm with padding

ProseStrong

Applied to bold text.

This is bold text in a sentence.

This is **bold text** in a sentence.

Styling: font-medium

Block Elements

ProseBlockQuote

Applied to blockquotes.

This is a blockquote with important information.

> This is a blockquote with important information.

Styling: border-l-2 pl-6 italic with top margin

ProseHr

Applied to horizontal rules.

---

Styling: my-4 md:my-8

ProseImg

Applied to images.

![Alt text](/path/to/image.png)

Styling: rounded-md

Lists

ProseUl

Applied to unordered lists.

  • First item
  • Second item
  • Third item
- First item
- Second item
- Third item

Styling: my-6 ml-6 list-disc

ProseOl

Applied to ordered lists.

  1. First step
  2. Second step
  3. Third step
1. First step
2. Second step
3. Third step

Styling: my-6 ml-6 list-decimal

ProseLi

Applied to list items.

Styling: mt-2

Tables

ProseTable, ProseTr, ProseTh, ProseTd

Applied to markdown tables.

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

Styling:

  • Table wrapper with overflow scroll and rounded border
  • Header cells (th) with bold text and padding
  • Data cells (td) with padding
  • Row borders between items

Table Alignment

Use colons in the separator row:

LeftCenterRight
LCR
| Left | Center | Right |
| :--- | :----: | ----: |
| L    |   C    |     R |

Code Blocks

ProsePre

Applied to fenced code blocks with syntax highlighting.

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

Features:

  • Shiki syntax highlighting
  • Language icon and label
  • Copy button
  • Optional line numbers
  • Line highlighting

Code Block Options

With Filename

utils.ts
export function helper() {}

```ts [utils.ts]
export const helper = () => {}
```

With Line Numbers

Add showLineNumbers to the code fence:

```ts showLineNumbers
const a = 1
const b = 2
```

With Line Highlighting

Highlight specific lines using curly braces:

```ts {2,4}
const a = 1
const b = 2  // highlighted
const c = 3
const d = 4  // highlighted
```

Supported Languages

Code blocks support syntax highlighting for:

  • TypeScript (ts, tsx)
  • JavaScript (js, jsx)
  • Vue (vue, vue-html)
  • HTML, CSS, JSON
  • Bash/Shell (bash, shell)
  • YAML, Markdown, MDC

Customization

All Prose components can be overridden by creating a component with the same name in your project's components/content/ directory.

ButtonAButton