jixoai-ui
the terminal design language
loading the style sheet…
Skip to content
docs · print medium: screen

registry:ui · General

inline code — the token, framed by its backdrop

A native <code> — the element whose entire meaning is 'this is source code' — in the ladder's fused/tonal/outline paint with kbd-law geometry. Mono with untouched case: code is not a label, so the eyebrow voice (uppercase, tracking) never applies. Highlighting rides the engine seam: the stock microlighter RANGE engine paints zero markup — token ranges over the same text node, so the text stays copyable and the frame never depends on it. Inside <pre> the jx-pure reset strips a bare code's frame — long or dynamic code belongs to CodeCard.

install — inline-code

$npx jixoai-ui add inline-code

https://ui.jixoai.com/r/inline-code.json

native <code> fused default microlighter ranges zero markup

overview

Overview

A native code element in the variant grammar's fused/tonal/outline ladder — the chip the platform never shipped, with highlighting that paints zero markup.

InlineCode renders one native <code> — the element whose meaning is "this is source code" — in the variant grammar's three-rung ladder: fused (the default; the backdrop-fusion band — a transparent ground plus a backdrop contrast filter, zero own color), tonal (the 12%/45% tint from --jx-tonal), and outline (the structural 1px twin). Omitted, the variant resolves through the ambient paint zone; the frozen recipes are pinned by the family spec.

Highlighting rides the engine seam — per-instance backend prop, else the HIGHLIGHT_KEY context, else the stock microlighter RANGE engine: token ranges over the same text node in the CSS.highlights registry, so the text stays copyable, the frame never depends on the paint, and a page of chips costs one document scan. lang="auto" runs the zero-download fingerprint heuristic (wrong at worst in color); lang="text" stays plain forever; an explicit language is trusted. The geometry is the density radius ladder --jx-chip-radius plus the padding formula radius + fontSize × (lineHeight − 1) / 2, and the six text modifiers ride the shared kernel — an absent prop emits nothing.

Kinship, named precisely: code-card shares the ENGINE seam verbatim (the same backend contract and HIGHLIGHT_KEY), and avatar-law simplicity shows in the stateless display posture — but nothing composes this chip (grep receipt: only the blueprint scenes mount it), and it composes nothing; long or dynamic code belongs to CodeCard, and inside <pre> the jx-pure reset strips a bare code's frame. The eight-axis surface resolves no-own on the chip (the carriers stamp and supply; the merge law joins them with the modifier mirrors before the consumer style) — the shared grammar lives on the universal props page.

inline-code

Plain, explicit, and auto-detected — one component, three language paths, the same frame.

Set --jx-tonal to retune any tonal chip.

const answer: number = 42 pins the grammar; {#each list as item (item.id)}{/each} too.

npm install @jixoai/ui and { name: 'jixoai' } were auto-detected — the chip renders before the grammar resolves.

inline-code-usage.svelte svelte
<script lang="ts">
  import InlineCode from '@ui/inline-code.svelte';
</script>

<!-- plain forever: it says a token, not code -->
<InlineCode lang="text">--jx-tonal</InlineCode>

<!-- explicit lang: detection is skipped -->
<InlineCode lang="ts">const answer: number = 42</InlineCode>

<!-- auto: the zero-download fingerprint heuristic picks the grammar -->
<InlineCode>npm install @jixoai/ui</InlineCode>

<!-- the ladder: fused is the default band, outline the structural twin -->
<InlineCode variant="outline">var(--primary)</InlineCode>

demo

The ladder trio — fused (default), tonal, outline

Fused is the backdrop-fusion rung: a transparent ground plus a backdrop contrast filter pulling whatever sits BEHIND the chip toward mid — near-black lifts, near-white dims — so the band reads over any ground with zero color tokens. The fusion IS the frame: the width-only border is painted transparent (currentColor would leak) and forced-colors repaints it CanvasText. On a flat page ground it is deliberately near-invisible — the ghost's own quiet; over tonal or patterned grounds it earns its name. Tonal tints 12%/45% from --jx-tonal; outline lets the 1px --jx-outline border do the work.

inline-code · ladder

fused · the page ground tonal · neutral default outline · structural tonal · injected success
fused over a tonal ground tonal outline
fused over a pattern tonal outline
inline-code-variants-demo.svelte svelte
<script lang="ts">
  import InlineCode from '@ui/inline-code.svelte';
</script>

<!-- the ladder trio over the page ground -->
<InlineCode>fused · the page ground</InlineCode>
<InlineCode variant="tonal">tonal · neutral default</InlineCode>
<InlineCode variant="outline">outline · structural</InlineCode>
<InlineCode variant="tonal" class="jx-hue-success">tonal · injected success</InlineCode>

<!-- fused earns its name over tonal / patterned grounds -->
<div class="flex flex-wrap items-center gap-3 rounded-(--radius) bg-muted p-4">
  <InlineCode>fused over a tonal ground</InlineCode>
  <InlineCode variant="tonal">tonal</InlineCode>
  <InlineCode variant="outline">outline</InlineCode>
</div>
<div class="flex flex-wrap items-center gap-3 rounded-(--radius) p-4 bg-[repeating-linear-gradient(45deg,var(--muted)_0_8px,transparent_8px_16px)]">
  <InlineCode>fused over a pattern</InlineCode>
  <InlineCode variant="tonal">tonal</InlineCode>
  <InlineCode variant="outline">outline</InlineCode>
</div>
usage
<script lang="ts">
  import InlineCode from '@ui/inline-code.svelte';
</script>

<!-- plain forever: it says a token, not code -->
<InlineCode lang="text">--jx-tonal</InlineCode>

<!-- explicit lang: detection is skipped -->
<InlineCode lang="ts">const answer: number = 42</InlineCode>

<!-- auto: the zero-download fingerprint heuristic picks the grammar -->
<InlineCode>npm install @jixoai/ui</InlineCode>

<!-- the ladder: fused is the default band, outline the structural twin -->
<InlineCode variant="outline">var(--primary)</InlineCode>

engine

The engine seam — microlighter by default

Highlighting is pluggable exactly like code-card's: a backend prop, else the HIGHLIGHT_KEY context default, else the stock DEFAULT_MICROLIGHTER_BACKEND singleton. The range engine paints ZERO markup — token ranges in the global CSS.highlights registry over the plain text node, coalesced to one document scan per frame (a markdown page of chips costs one pass). The chip carries the --tok-* palette itself; microlighter's jixoai theme bridges --syntax-* onto it chip-side. A CSS.highlights PRE-GATE degrades to plain text silently where the API is missing (old Safari); print loses ranges by the documented freeze limitation — pin a markup backend through the seam if printing highlighted chips matters.

per instance — the backend prop

per-instance
<script lang="ts">
  import InlineCode from '@ui/inline-code.svelte';
  import { shiki } from '@lib/highlight/shiki';
</script>

<!-- per instance: any HighlightBackend prop wins outright -->
<InlineCode lang="ts" backend={shiki()}>const answer: number = 42</InlineCode>

<!-- no prop: the HIGHLIGHT_KEY context, else the stock microlighter -->
<InlineCode>npm install @jixoai/ui</InlineCode>

subtree default — the context lane

subtree default
<script lang="ts">
  import { setContext } from 'svelte';
  import { HIGHLIGHT_KEY } from '@lib/highlight/context-key';
  import { microLighter } from '@lib/highlight/microlighter';

  // the subtree default: every chip below eats the provided backend;
  // the prop still wins per instance — the code-card seam, verbatim
  setContext(HIGHLIGHT_KEY, { backend: microLighter() });
</script>

The seam ships with the items (zero dependencies): HIGHLIGHT_KEY + the structural type. Vite hosts owe microlighter its two bundler lines — dev excludes it from the optimizer (optimizeDeps: { exclude: ['microlighter'] }), builds emit its dist/grammars/*.js next to the engine chunk (this site's vite.config.ts is the reference implementation; a miss shows plain text with zero console signal). The full engine matrix — markup engines that survive print, sizes, languages — lives on the code-card page.

law

The honest heuristic

lang='auto' runs a zero-download regex fingerprint scorer over the snippet — tuned for short inline code, not a general language detector. Weights add up per candidate, the highest score at or above 2 wins, and plain prose stays plain. An explicit lang skips the guesswork entirely; detection is documented, deterministic, and wrong at worst in color.

what the fingerprint detector answers for representative snippets
color: var(--jx-tonal)css
{#each list as item (item.id)}{/each}svelte
const value: number = 42typescript
npm install @jixoai/uibash
{"name": "jixoai", "private": true}json
Ctrl + Cplain

The candidate set mirrors the highlight engines' curated grammars (ids + aliases):

typescripttsxjavascriptjsxsveltehtmlcssscssjsonbashmarkdownyamlvuetsmtsctsjsmjscjsshshellzshshellscriptmdymlhtm

law

Geometry — the density radius ladder and the padding formula

The corner leaves the global --radius for its own density ladder token --jx-chip-radius: 2px at 2xs/xs/sm (a 1px-border band reads as softened, not round), 4px at default, 8px at lg. The channel is a css custom property, so ambient density scopes and explicit data-density stamps both flow through one declaration. padding-inline = radius + fontSize × (lineHeight − 1) / 2 — the leading's half-extra on each side; the flat --jx-inset form is retired.

2xs
const value = 42
xs
const value = 42
sm
const value = 42
default
const value = 42
lg
const value = 42
the padding formula (normative)
padding-inline = radius + fontSize × (lineHeight − 1) / 2

/* inline-code.css — ONE :where rule, custom properties with token
   fallbacks (absent modifiers read the density pair; the rule stays
   :where so consumer padding utilities always win): */
:where([data-jx-inline-code]) {
  padding-inline: calc(
    var(--jx-chip-radius) +
    (var(--jx-code-line, var(--jx-line-secondary))
      - var(--jx-code-fs, var(--jx-text-secondary))) / 2
  );
}

/* explicit modifier props mirror their values onto the vars through
   the style attribute (the only channel past the scanner):
   fontSize="12px" lineHeight={1.5} ⇒
     style="--jx-code-fs:12px;--jx-code-line:calc((12px) * 1.5)"
   (12px × 1.5 line box − 12px) / 2 + radius 4px ⇒ 7px — the Owner's
   worked example, resolved by the same one rule */

Worked examples at default density (radius 4px): 12px type on a 1.0 line ⇒ 4px of padding; the same type on 1.5 ⇒ 7px. Explicit fontSize + lineHeight props fold the excess in JS for density-exactness; half-pairs substitute the provided literal and keep the missing half on its token.

inline-code · modifiers

The six text modifiers ride the shared kernel (@jixoai/text's text-style resolver): an ABSENT prop emits nothing — the ambient channels flow untouched — and an EXPLICIT prop emits its utility after the variant paint, before the consumer class. An explicit fontSize/lineHeight also feeds the padding calc and replaces the base token utility for that property (emission, not ordering, is the guarantee). The playground drives the chip-relevant four; the full six-control flagship lives on the text page.

lineHeight 1.75 weight 450 italic tighter tracking IBM Plex Mono
13px mono 13px / 1.25 — the padding folds the excess
driven by the playground const value = 42 --jx-chip-radius
inline-code-modifiers-usage.svelte svelte
<script lang="ts">
  import InlineCode from '@ui/inline-code.svelte';
</script>

<!-- the chip-relevant four: fontSize and lineHeight also feed the
     padding calc (radius + fontSize × (lineHeight − 1) / 2) -->
<InlineCode lang="ts" fontSize="12px" lineHeight={1.5} weight="normal">const value = 42</InlineCode>
<InlineCode lang="text" variant="outline" fontSize="12px" lineHeight={1.5} weight="normal">--jx-chip-radius</InlineCode>

types

The three language paths

Plain stays plain forever; an explicit lang is trusted as-is; auto asks the heuristic. All three render the same chip before any JavaScript runs.

lang="text" · lang="ts" · lang="auto" (default)

usage

Usage

usage
<script lang="ts">
  import InlineCode from '@ui/inline-code.svelte';
</script>

<!-- plain forever: it says a token, not code -->
<InlineCode lang="text">--jx-tonal</InlineCode>

<!-- explicit lang: detection is skipped -->
<InlineCode lang="ts">const answer: number = 42</InlineCode>

<!-- auto: the zero-download fingerprint heuristic picks the grammar -->
<InlineCode>npm install @jixoai/ui</InlineCode>

<!-- the ladder: fused is the default band, outline the structural twin -->
<InlineCode variant="outline">var(--primary)</InlineCode>

a11y

Accessibility

ARIA

AttributeValueDescription
codenative elementCommunicates "this is code" without extra ARIA; the range engine never touches the DOM text.
highlight rangesasync, cosmeticPaint rides the CSS Custom Highlight API over the SAME text node — screen readers read the identical characters before and after hydration.

theming

Density and tokens

xs
const value = 42
default
const value = 42
lg
const value = 42
TokenDefaultSource
--jx-chip-radiusdensity ladder 2/2/2/4/8pxdensity
--jx-tonalvar(--primary); tonal injects var(--muted-foreground)color
--jx-outlinevar(--border)color
--tok-token-keywordvar(--primary)color
--tok-token-stringvar(--accent)color
--jx-text-secondarydensity scaledensity
--jx-line-secondarydensity scaledensity

axes

Universal props

The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query(). The carriers JOIN the style channel first, the modifier mirrors follow, the consumer style closes (the merge law). The size axis is separate from the modifier fontSize mirror that feeds the padding formula — different names, no collision.

inline-code · universal props

const axes = 8
const named = 'steps'
universal-props-demo.svelte svelte
<InlineCode lang="ts" size={18}>const axes = 8</InlineCode>

api

InlineCode props

Properties

PropertyTypeDefaultDescription
variant 'fused' | 'tonal' | 'outline''fused' · ambient zoneThe ladder paint (fused own, the backdrop-fusion band); omitted → the ambient paint zone, else the frozen own fused.
lang string'auto''auto' = fingerprint heuristic; an explicit id/alias skips detection; 'text'/'plain' stay plain.
backend HighlightBackend—The engine seam: prop → HIGHLIGHT_KEY context → the stock microlighter range engine. A rejecting backend leaves the plain chip standing.
lineHeight number | string—The shared text-modifier kernel: number ⇒ the unitless ratio (leading-[1.5]); string ⇒ verbatim. Also feeds the padding calc; absent ⇒ the ambient line flows.
weight string—A weight word or number — 'bold' → font-bold (named map); '450' → font-[450].
italic boolean—true ⇒ italic; absent stays ambient (never not-italic).
tracking string—A letter-spacing word or length — 'wide' → tracking-wide; '-0.02em' → tracking-[-0.02em].
family string—A font-family value — verbatim [font-family:…] (spaces escape to underscores).
fontSize string—A CSS length — verbatim [font-size:…]; also feeds the padding calc. Never named size (the axis-word law).
class string—Adds consumer classes; jx-hue-* intent utilities retune the tonal slot, and [--tok-token-…:…] injections land here.

Universal props

PropertyTypeDefaultDescription
size'small' | 'medium' | 'large' | 'auto' | number'auto' · ambient scopethe base scale — root font-size; parts size in em
shape'round' | 'scoop' | 'bevel' | 'notch' | 'square' | 'squircle' | 'auto''auto' · ambient scopecorner geometry (CSS corner-shape; §14 degrade table)
radius'small' | 'medium' | 'large' | 'auto' | number'auto' · ambient scopecorner size; auto = the concentric broadcast (§3)
density'small' | 'medium' | 'large' | 'auto' | number'auto' · ambient scopespacing/leading scale over the kernel channels (§4)
color'primary' | 'secondary' | 'error' | 'warn' | 'success' | 'info' | 'auto' | number | string'auto' · ambient scopethe hue axis of the fixed oklch primary system (§5)
theme'light' | 'dark' | 'system' | 'auto''auto' · ambient scopelight/dark profile; system = the JS-mutable global (§6)
elevation'level-1' | 'level0' | 'level1' | 'level2' | 'level3' | 'level4' | 'level5' | 'auto' | number'auto' · ambient scopeofficial M3 levels over the surface ladder (§7)
motion'reduced' | 'subtle' | 'normal' | 'expressive' | 'auto' | number'auto' · ambient scopeintensity across the motion kernels (§8)

Every other attribute (title, data-*, aria-*) flows through to the native <code> element verbatim. Module exports: INLINE_LANGS (the detection candidates) and detectInlineLang(code) (the pure heuristic).

jixoai-ui ui.jixoai.com the jixoai design language

Theme

Brand hue

0°

Auto cycle · 24h