mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
3a400692f0
* 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>
269 lines
6.8 KiB
Plaintext
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
|