# Emphasis Examples This document demonstrates various emphasis methods available in MDX. ## Subscript Use `_{` tags for subscript text, commonly used for chemical formulas or mathematical notation.

Example: H₂O (water) or E=mc₂

```markdown
H₂O
E=mc₂
```

## Superscript

Use `^{` tags for superscript text, commonly used for footnotes, exponents, or ordinal numbers.

Example: 2¹⁰ = 1024 or 1^st, 2^nd, 3^rd

```markdown
2¹⁰ = 1024
1^st, 2^nd, 3^rd
```

## Keyboard Keys

Use `` tags to display keyboard shortcuts or keys.

Example: Press ⌘ + K to open the command palette, or Ctrl + C to copy.

```markdown
⌘ + K
Ctrl + C
```

## Callouts (using Blockquotes)

Blockquotes are styled with muted colors and can be used for callouts, notes, or important information.

> This is a callout or note. Blockquotes are perfect for highlighting important information, quotes, or warnings.

```markdown
> This is a callout or note. Blockquotes are perfect for highlighting important information, quotes, or warnings.
```

You can also use blockquotes for multiple paragraphs:

> This is the first paragraph of a callout.
>
> This is the second paragraph, continuing the callout.

## Highlight

For highlighting text, you can use the `data-highlight` attribute (if you create a custom component) or simply use **bold** for emphasis.

Example: This is **highlighted text** using bold, or you can use inline code for technical terms like `highlighted code`.

```markdown
**highlighted text**
`highlighted code`
```

## Alerts (using Blockquotes)

Blockquotes can also serve as alerts. You can combine them with other formatting:

> ⚠️ **Warning:** This is an alert message using a blockquote with bold text.

> ✅ **Success:** This is a success message.

> ℹ️ **Info:** This is an informational message.

```markdown
> ⚠️ **Warning:** This is an alert message using a blockquote with bold text.
> ✅ **Success:** This is a success message.
> ℹ️ **Info:** This is an informational message.
```

## Tables

Tables are supported via GitHub Flavored Markdown. Use pipes to separate columns.

| Feature | Status | Notes |
| ------------- | ------------ | ------------------- |
| Subscript | ✅ Available | Use `_{` tags |
| Superscript | ✅ Available | Use `^{` tags |
| Keyboard Keys | ✅ Available | Use `` tags |
| Callouts | ✅ Available | Use blockquotes `>` |
| Tables | ✅ Available | GFM syntax |
| Footnotes | ✅ Available | `[^1]` syntax |

```markdown
| Feature | Status | Notes |
| ----------- | ------------ | ---------------- |
| Subscript | ✅ Available | Use `_{` tags |
| Superscript | ✅ Available | Use `^{` tags |
```

You can also align columns:

| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Left | Center | Right |
| Text | Text | Text |

```markdown
| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Left | Center | Right |
```

## Footnotes

Footnotes allow you to add references and citations. Use `[^1]` syntax and define the footnote at the bottom.

This is a sentence with a footnote[^1]. You can also have multiple footnotes[^2] in the same document.

[^1]: This is the first footnote definition. It appears at the bottom of the document.

[^2]: This is the second footnote. Footnotes are automatically numbered and linked.

```markdown
This is a sentence with a footnote[^1].

[^1]: This is the first footnote definition.
```

## Combining Methods

You can combine multiple emphasis methods:

- **Bold text** with keyboard shortcuts
- _Italic_ with _subscript and ^superscript
- Tables with **bold** and `code` formatting
- Blockquotes with **bold**, _italic_, and keys

> This is a **callout** with _italic_ text, keyboard keys, and a footnote[^3].

[^3]: This footnote is referenced from within a blockquote.}}}}}}

Component Showcase