ID:WORK-006Status:pendingPriority:mediumComplexity:unknown
Build math Rune
Summary
Mathematical notation rendered from LaTeX/KaTeX syntax. Supports both inline and block (display) mode. Aliases: equation, formula. This is a core rune.
Attributes
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
display | Boolean | true | No | Block display mode (centered, full-width) vs inline |
label | String | — | No | Equation label for cross-referencing |
Content Model
- Text content inside the tag is treated as raw LaTeX/KaTeX source — not parsed as Markdown
- Similar pattern to
{% diagram %}treating content as Mermaid source
Transform Output
- typeof:
Math - Tag:
<div>(display) or<span>(inline) - Properties:
source(the raw LaTeX string),label
Implementation Tasks
- Create schema in
packages/runes/src/tags/math.ts— raw source extraction pattern (like diagram) - Add RuneConfig entry in
packages/runes/src/config.ts - Write CSS in
packages/lumina/styles/runes/math.css - Import CSS in
packages/lumina/index.css - Implement rendering: build-time KaTeX transform (preferred, like Shiki for code) or web component fallback
- Write tests in
packages/runes/test/tags/math.test.ts - Create inspector fixture
- Run CSS coverage tests
Implementation Notes
Rendering strategy mirrors the Diagram rune — either a build-time transform (like @refrakt-md/highlight does for code blocks) or a web component that initializes from the source attribute. Build-time is preferred for performance and SSR.