Skip to main content

Inline Code

3 min readStableBeginner

A pair of backticks marks a short piece of code inside a sentence, so commands, variable names, and file paths stand apart from the prose around them. For multi-line samples with a title bar and syntax highlighting, use code blocks instead.

Quick Start

One backtick pair around a command.

Run npm run dev to start the server.

quick-start.md
Markdown
Run `npm run dev` to start the server.

Adding Options

Several spans in one sentence

Each pair stands on its own, so the env var, the file, and the command stay visually separate.

Set THEME_VARIANT in .env.local, then restart npm run dev.

several-spans.md
Markdown
Set `THEME_VARIANT` in `.env.local`, then restart `npm run dev`.

A span nests inside anything that takes inline content. The heading right above this sentence contains one, and so does every bullet below.

  • Bold plus code: ACCESS_MODE decides whether the login gate runs.
  • Link plus code: CodeBlock renders the fenced version.
  • Struck through: legacyTheme was removed.
  • Plain: press Cmd+K to open search.
nested-spans.md
Markdown
### Spans inside `headings`, links, and lists
 
- Bold plus code: **`ACCESS_MODE`** decides whether the login gate runs.
- Link plus code: [`CodeBlock`](/features/code/code-blocks) renders the fenced
  version.
- Struck through: ~~`legacyTheme`~~ was removed.
- Plain: press `Cmd+K` to open search.

Advanced

Backticks inside a span

Wrap the span in a longer run of backticks than anything inside it, and pad the content with one space on each side. The parser drops one space from each end, which is how a span can hold a bare backtick.

Write `npm run dev` when the backticks themselves need to show. A lone ` needs the same padding trick.

backticks-inside.md
Markdown
Write `` `npm run dev` `` when the backticks themselves need to show. A lone
`` ` `` needs the same padding trick.

Keep climbing when the content holds a longer run. Prettier rewrites these inline, so the escalation reads more clearly in a plain fence:

delimiter-escalation.txt
Plain Text
`code`              content has no backtick
`` `code` ``        content has a run of one
``` `` `` ```       content has a run of two

The padding rule is symmetric: a space is dropped only when both ends have one. So ` a ` prints a, while a single leading space survives.

What a span will not do

Nothing inside a span is parsed. Markdown markers, backslash escapes, and curly braces all come out as typed, which is what makes a span the safe way to write MDX syntax on a page.

  • Markers stay literal: **not bold** and [not a link](/x).
  • Backslashes stay literal: \n and \t print as two characters each.
  • Braces stay literal: { theme: 'dark' } would otherwise be read as a JavaScript expression by MDX.
  • Angle brackets stay literal: <Card /> would otherwise be read as a component.
literal-content.md
Markdown
- Markers stay literal: `**not bold**` and `[not a link](/x)`.
- Backslashes stay literal: `\n` and `\t` print as two characters each.
- Braces stay literal: `{ theme: 'dark' }` would otherwise be read as a
  JavaScript expression by MDX.
- Angle brackets stay literal: `<Card />` would otherwise be read as a
  component.

Two more edge cases have no live form, because saving the page would rewrite them:

span-edge-cases.txt
Plain Text
`a
b`                 renders as a single line: a b
 
| `x \| y` |       a pipe inside a span still needs the backslash

A span that wraps across a line break collapses to one space, and a table cell ends at the first unescaped pipe even when that pipe sits inside code.

Options

`code`marker

Wraps the content in a single backtick pair and renders it as an inline code span.

``code``marker

Doubles the backticks so the span can contain a literal backtick.

```code```marker

Three or more backticks, for a span that contains a doubled pair. Use one more backtick than the longest run inside.

` code `padding

One space is stripped from each end when both ends have one. That is how a span holds a leading, trailing, or lone backtick.

\|escape sequence

Escapes a pipe inside a table cell. The escape is still required when the pipe sits inside a code span.

Related pages

Code Blocks

Tables

Was this page helpful?