Files
mintlify__docs/create/text.mdx
mintlify[bot] f9c4d6c4f0 Documentation quality check: address gaps in recently updated pages (#6326)
* docs: address quality-check gaps across recent page updates

* docs: mirror quality-check fixes into es, fr, and zh translations

* Apply suggestions from code review

Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>

---------

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

309 lines
8.5 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", "headings", "anchor links", "custom heading IDs"]
---
## Headings
Headings organize your content and create navigation anchors. They appear in the table of contents and help users scan your documentation.
### Create headings
Use `#` symbols to create headings of different levels:
```mdx
## Main section heading
### Subsection heading
#### Sub-subsection heading
```
Use `##` (H2) through `######` (H6) for content sections. The title set in a page's [frontmatter](/organize/pages) applies a title heading, `#` (H1). Do not use top-level `#` headings inside a page.
<Tip>
Use descriptive, keyword-rich headings 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 heading 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.
### Disable anchor links
By default, headings 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 headings.
<CodeGroup>
```mdx HTML heading example
<h2 noAnchor>
Heading without anchor link
</h2>
```
```mdx React heading example
<Heading level={2} noAnchor>
Heading without anchor link
</Heading>
```
</CodeGroup>
When `noAnchor` is used, the heading does not display the anchor chip and clicking the heading text does not copy the anchor link to the clipboard.
## Text formatting
Mintlify supports 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~~ |
### Combine 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. Omit the file extension (`.mdx` or `.md`). Relative paths and paths with extensions do not work in production.
```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
Mintlify supports LaTeX for rendering mathematical expressions and equations. You can override automated detection by configuring `styling.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, headings provide better content separation with the added benefit of navigation anchors.
</Tip>
## Comments
Use MDX-style comments to add notes, reminders, or to-dos in your source files. Comments don't render in the published page.
```mdx
{/* This is a comment and won't appear in the published docs. */}
{/*
Multi-line comments work too.
Useful for TODOs or reviewer notes.
*/}
```
<Warning>
HTML-style `<!-- ... -->` comments are not supported in MDX. Always use `{/* ... */}`.
</Warning>
## Escape special characters
MDX treats `{` and `}` as the start and end of JSX expressions, and `<` as the start of a JSX tag. When you want these characters to render as literal text, escape them so MDX does not try to parse them.
| Character | How to escape |
| :--- | :--- |
| `{` and `}` | Wrap the character in backticks (`` `{` ``), use the HTML entity (`&#123;` for `{`, `&#125;` for `}`), or write it inside a JSX expression as a string (`{'{'}`). |
| `<` | Wrap in backticks (`` `<` ``), use the HTML entity `&lt;`, or write `{'<'}`. |
| `` ` `` | Use a backslash (`` \` ``). |
| `\` | Use a double backslash (`\\`). |
```mdx Escape examples
Use the `{variable}` syntax to interpolate values.
The placeholder &#123;name&#125; renders as literal curly braces.
In JSX, write {'{ key: value }'} to display a literal object.
```
Inside fenced code blocks (```` ``` ````), MDX does not parse curly braces, so you can write `{variable}` directly without escaping. Escaping is only required in regular prose and inside JSX attributes.
## Best practices
### Content organization
- Use headings to create clear content hierarchy
- Follow proper heading hierarchy (don't skip from H2 to H4)
- Write descriptive, keyword-rich heading 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