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

registry:ui · General

math-inline — real math in prose, no chrome

The inline math surface: ONE native <span> carrying real KaTeX markup rendered SYNCHRONOUSLY — the isomorphic-small SSR lane (prerender bakes the formula itself: no plain-text floor, no hydration work, no flash; a tex prop change re-derives live). No chrome, no controls; the span inherits prose currentColor — light/dark inverts with ZERO re-render. role="math" sits on the content-only span with katex's hidden MathML as the screen-reader path (no aria-label shadowing); consumer attributes spread through first — data-testid/title/aria-*/handlers land untouched while the component's semantic stamps win their own fields.

install — math-inline

$npx jixoai-ui add math-inline

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

based on KaTeX one span · zero chrome currentColor · zero re-render MathML screen-reader path

usage

Usage

Compose the span between prose runs — tex is a runtime string re-derived synchronously on every change; the formula sits on the text baseline and inherits the paragraph's color.

MathInline usage
<script lang="ts">
  import MathInline from '@ui/math-inline';
</script>

<p class="prose">
  Gaussian beams narrow to a waist
  <MathInline tex="w_0 = \sqrt{\frac{2\lambda}{\pi \, \mathrm{NA}}}" />
  before diverging at half-angle
  <MathInline tex="\theta \approx \frac{\lambda}{\pi w_0}" />;
  together they give the product
  <MathInline tex="w_0 \theta = \frac{2\lambda}{\pi}" />.
</p>

math-inline

One span, one formula, live: type any TeX in the playground and the markup re-derives synchronously — an unclosed group paints the error run in place (throwOnError:false is the facade default).

The identity eiπ+1=0\mathrm{e}^{\mathrm{i}\pi} + 1 = 0 ties the five constants together — type another one and watch it re-derive with no hydration debt.

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

<!-- inline math inside prose — the span inherits currentColor -->
<p>
  The identity <MathInline tex="\mathrm{e}^{\mathrm{i}\pi} + 1 = 0" /> ties the five constants together.
</p>

law

Inline in prose — several formulas, one paragraph

Display math owns its figure; inline math rides the sentence. The span carries nothing but the formula output, so prose rhythm, wrapping, and color all belong to the paragraph around it.

math-inline · prose lane

A Gaussian beam narrows to a waist w0=2λπ NAw_0 = \sqrt{\frac{2\lambda}{\pi \, \mathrm{NA}}} before diverging at half-angle θ≈λπw0\theta \approx \frac{\lambda}{\pi w_0}; together they pin the product w0θ=2λπw_0 \theta = \frac{2\lambda}{\pi}, while the Rayleigh range zR=πw02λz_R = \frac{\pi w_0^2}{\lambda} sets how far the waist holds. Flip the site theme — the formulas invert with the prose and nothing re-renders: katex paints in currentColor, so light/dark is a color-scheme change, not a re-derive.

math-inline-lane-demo.svelte svelte
<script lang="ts">
  import MathInline from '@ui/math-inline';
</script>

<div class="border border-border p-4">
  <p class="text-pretty text-[15px] leading-7">
    A Gaussian beam narrows to a waist
    <MathInline tex="w_0 = \sqrt{\frac{2\lambda}{\pi \, \mathrm{NA}}}" />
    before diverging at half-angle
    <MathInline tex="\theta \approx \frac{\lambda}{\pi w_0}" />;
    together they pin the product
    <MathInline tex="w_0 \theta = \frac{2\lambda}{\pi}" />,
    while the Rayleigh range
    <MathInline tex="z_R = \frac{\pi w_0^2}{\lambda}" />
    sets how far the waist holds.
  </p>
</div>

a11y

Accessibility

role=math sits on the content-only span; KaTeX's hidden MathML is the screen-reader path, so the surface mounts no aria-label that would shadow it. Consumer aria-* rides the rest spread and wins its own fields.

Keyboard

KeyAction
—No focus stop of its own: the span is prose content, not a control

ARIA

AttributeValueDescription
role="math"on the spanThe span contains only the formula output — nothing inside to flatten.
hidden MathMLkatex outputoutput: htmlAndMathml is the facade default — the semantic tree ships in the markup itself.
aria-labelnone by designWould shadow the MathML; a consumer-provided label rides rest and lands.

axes

Universal props

The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. FIRST-TIME contract, all no-own: the span paints nothing (prose currentColor; the engine css rides $lib/katex).

MathInline · universal props

Inline math: the span forwards the tree's axes.

math-inline-universal.svelte svelte
<MathInline size="medium">…</MathInline>

api

API

Five props plus the HTML rest; tex is the only required one.

Properties

PropertyTypeDefaultDescription
tex * string—TeX source (runtime string, rendered synchronously in inline mode).
macros KatexOptions['macros']—KaTeX macros — merged per key OVER the site-level registerMacros table ($lib/katex).
strict KatexOptions['strict']—KaTeX strict mode passthrough (boolean | ignore | warn | error | handler).
trust KatexOptions['trust']—KaTeX trust passthrough (boolean | handler).
class string''Merged onto the span through cn().
…rest HTMLAttributes<HTMLSpanElement>—Spread onto the span BEFORE the component’s own data-jx-math-inline/role stamps — data-testid/title/aria-*/handlers land untouched.

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)
jixoai-ui ui.jixoai.com the jixoai design language

Theme

Brand hue

0°

Auto cycle · 24h