Files
mintlify[bot] 3a400692f0 Add horizontal rule documentation (#5158)
* Add horizontal rule documentation to text formatting page

Generated-By: mintlify-agent

* copy edit

---------

Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
2026-04-06 11:41:50 -07:00

269 lines
6.8 KiB
Plaintext

---
title: "Format text"
description: "Format text in your documentation with Markdown headings, bold, italic, links, blockquotes, and other inline styling options in MDX pages."
keywords: ["Markdown formatting", "text styling", "headers", "anchor links", "custom heading IDs"]
---
## Headers
Headers organize your content and create navigation anchors. They appear in the table of contents and help users scan your documentation.
### Creating headers
Use `#` symbols to create headers of different levels:
```mdx
## Main section header
### Subsection header
#### Sub-subsection header
```
<Tip>
Use descriptive, keyword-rich headers that clearly indicate the content that follows. This improves both user navigation and search engine optimization.
</Tip>
### Custom heading IDs
By default, Mintlify generates anchor IDs automatically from header text. You can override the generated ID with a custom one using the `{#custom-id}` syntax:
```mdx
## My section {#my-custom-anchor}
### Configuration options {#config}
##### Deep detail {#detail}
```
The custom ID replaces the auto-generated anchor, so you can link to the heading with `#my-custom-anchor` or `#config` instead of the default slugified text.
This is useful when you want stable anchor links that don't change if you update the heading text, or when you need shorter, more memorable anchors.
### Disabling anchor links
By default, headers include clickable anchor links that allow users to link directly to specific sections. You can disable these anchor links using the `noAnchor` prop in HTML or React headers.
<CodeGroup>
```mdx HTML header example
<h2 noAnchor>
Header without anchor link
</h2>
```
```mdx React header example
<Heading level={2} noAnchor>
Header without anchor link
</Heading>
```
</CodeGroup>
When `noAnchor` is used, the header does not display the anchor chip and clicking the header text does not copy the anchor link to the clipboard.
## Text formatting
We support most Markdown formatting for emphasizing and styling text.
### Basic formatting
Apply these formatting styles to your text:
| Style | Syntax | Example | Result |
|-------|--------|---------|--------|
| **Bold** | `**text**` | `**important note**` | **important note** |
| *Italic* | `_text_` | `_emphasis_` | *emphasis* |
| ~~Strikethrough~~ | `~text~` | `~deprecated feature~` | ~~deprecated feature~~ |
### Combining formats
You can combine formatting styles:
```mdx
**_bold and italic_**
**~~bold and strikethrough~~**
*~~italic and strikethrough~~*
```
**_bold and italic_**<br />
**~~bold and strikethrough~~**<br />
*~~italic and strikethrough~~*
### Superscript and subscript
For mathematical expressions or footnotes, use HTML tags:
| Type | Syntax | Example | Result |
|------|--------|---------|--------|
| Superscript | `<sup>text</sup>` | `example<sup>2</sup>` | example<sup>2</sup> |
| Subscript | `<sub>text</sub>` | `example<sub>n</sub>` | example<sub>n</sub> |
## Links
Links help users navigate between pages and access external resources. Use descriptive link text to improve accessibility and user experience.
### Internal links
Link to other pages in your documentation using root-relative paths:
```mdx
[Quickstart](/quickstart)
[Steps](/components/steps)
```
[Quickstart](/quickstart)<br />
[Steps](/components/steps)
### External links
For external resources, include the full URL:
```mdx
[Markdown Guide](https://www.markdownguide.org/)
```
[Markdown Guide](https://www.markdownguide.org/)
### Broken links
You can check for broken links in your documentation using the [CLI](/cli):
```bash
mint broken-links
```
## Block quotes
Block quotes highlight important information, quotes, or examples within your content.
### Single line block quotes
Add `>` before text to create a block quote:
```mdx
> This is text that stands out from the main content.
```
> This is text that stands out from the main content.
### Multi-line block quotes
For longer quotes or multiple paragraphs:
```mdx
> This is the first paragraph of a multi-line block quote.
>
> This is the second paragraph, separated by an empty line with `>`.
```
> This is the first paragraph of a multi-line block quote.
>
> This is the second paragraph, separated by an empty line with `>`.
<Tip>
Use block quotes sparingly to maintain their visual impact and meaning. Consider using [callouts](/components/callouts) for notes, warnings, and other information.
</Tip>
## Mathematical expressions
We support LaTeX for rendering mathematical expressions and equations. You can override automated detection by configuring `styles.latex` in your `docs.json` [settings](/organize/settings-appearance#styling).
### Inline math
Use single dollar signs, `$`, for inline mathematical expressions:
```mdx
The Pythagorean theorem states that $(a^2 + b^2 = c^2)$ in a right triangle.
```
The Pythagorean theorem states that $(a^2 + b^2 = c^2)$ in a right triangle.
### Block equations
Use double dollar signs, `$$`, for standalone equations:
```mdx
$$
E = mc^2
$$
```
$$
E = mc^2
$$
<Info>
LaTeX support requires proper mathematical syntax. Refer to the [LaTeX documentation](https://www.latex-project.org/help/documentation/) for comprehensive syntax guidelines.
</Info>
## Line breaks and spacing
Control spacing and line breaks to improve content readability.
### Paragraph breaks
Separate paragraphs with blank lines:
```mdx
This is the first paragraph.
This is the second paragraph, separated by a blank line.
```
This is the first paragraph.
This is the second paragraph, separated by a blank line.
### Manual line breaks
Use HTML `<br />` tags for forced line breaks within paragraphs:
```mdx
This line ends here.<br />
This line starts on a new line.
```
This line ends here.<br />
This line starts on a new line.
<Tip>
In most cases, paragraph breaks with blank lines provide better readability than manual line breaks.
</Tip>
### Horizontal rules
Use Markdown `---` syntax or HTML `<hr />` tags to add a horizontal rule that visually separates sections of content:
```mdx
Content preceding the rule.
<hr />
Content following the rule.
```
Content preceding the rule.
<hr />
Content following the rule.
<Tip>
Use horizontal rules sparingly. In most cases, headers provide better content separation with the added benefit of navigation anchors.
</Tip>
## Best practices
### Content organization
- Use headers to create clear content hierarchy
- Follow proper header hierarchy (don't skip from H2 to H4)
- Write descriptive, keyword-rich header text
### Text formatting
- Use bold for emphasis, not for entire paragraphs
- Reserve italics for terms, titles, or subtle emphasis
- Avoid over-formatting that distracts from content
### Links
- Write descriptive link text instead of "click here" or "read more"
- Use root-relative paths for internal links
- Test links regularly to prevent broken references