Skip to main content
Frontend Glossary

UI components · Text

Inline Code

Also called: Code span, Inline snippet, Monospace text, Code tag

A short piece of code inside a sentence, like the function useState, the command npm install, or the file .env, set apart from body text with a monospace font and a light gray background.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Make inline code in body text consistent. Use the code tag with the font ui-monospace, SFMono-Regular, Menlo, monospace at 0.875em (a bit smaller than the body text), a light gray background #F3F4F6, text color #1F2937, 0.3em horizontal padding, 4px corner radius, and no border. In dark mode, switch to a #2A2D33 background with #E5E7EB text. Let long paths and URLs break anywhere (overflow-wrap: anywhere) so they never cause a sideways scrollbar. Only use it for code text like function names, commands, and file names. Commands longer than one line should use a code block with a copy button instead, and code inside pre shouldn't get this style.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Inline Code is what you need.

Use Inline Code when

  • Mentioning function names, variables, commands, or file paths in the body of tech docs, tutorials, and blog posts
  • Pointing out config keys, property names, or keywords from an error message in an AI reply
  • Marking values users must type exactly in UI help text, like an environment variable name

Pick something else when

  • Multi-line code, or a long command meant to be copied and run

    Use insteadCode Block

  • Keyboard keys (Ctrl, Esc, ⌘K). Use the Kbd keycap style.

    Use insteadKbd

  • Words you just want to emphasize. Use bold, and use a tag for status or category.

    Use insteadTag

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Using inline code for emphasis, so a paragraph has a dozen gray patches and the real code stops standing out

  2. 02

    Stuffing a whole long command into inline code, which causes a sideways scrollbar on phones and is hard to copy

  3. 03

    A background that's too dark or colorful, so it clashes with the body text and makes reading jumpy

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A short run of monospace text with a light gray background, small padding, and small rounded corners, sitting inside a sentence and wrapping along with the text.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

Inline code marks "this is code" inside body text: function names, variables, commands, file paths, config keys, and values to type exactly, as in "store the token in localStorage" or "run pnpm dev." It uses the HTML code tag. The usual style is a monospace font a bit smaller than the body text, a light gray background, a little horizontal padding, and small rounded corners. In Markdown, you wrap it in a pair of backticks.

How it differs from a Code Block: a code block is a separate, multi-line block with a language label and a copy button. Inline code is just a few words sitting in a sentence and wrapping along with the text. How it differs from Kbd: Kbd shows keys on the keyboard (Ctrl, Esc) as keycaps, while inline code is text you type or that appears in code. Don't mix it up with a Tag either. Tags show status or category, not code.

Only mark real code, and don't use it for emphasis or highlighting. Keep inline code short. A command longer than one line should become a code block so it's easy to copy. Keep the background light while still leaving enough contrast between the text and background, and give dark mode its own colors. Let long paths and URLs break anywhere (overflow-wrap: anywhere), or they'll push a sideways scrollbar onto phone screens.

Developer info
Term ID
component-inline-code
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • code:not(pre code)
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • inline-code
  • code-inline
  • code-span
  • code-text
  • code-tag
  • inline-snippet
  • mono-text
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • InlineCode
  • CodeInline
  • CodeText
  • CodeSpan
Semantic tags and roles

A weak signal. It only counts together with other cues.

  • <code>
Structure

Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.

  • inline in text
Priority
2 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026