Lumeo

Code

Inline or block monospace code snippet with optional copy button.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Code />

When to Use

  • Render short inline code references inside prose text.
  • Display multi-line code blocks with monospace styling and horizontal scroll.
  • Highlight file paths, variable names, or terminal commands in documentation.

Use the Code component to style inline code. Pass Variant="block" for multi-line blocks.

dotnet add package Lumeo --version 3.11.0
text-xs code text-base code text-lg code

Pick a variant to see it applied live.

dotnet add package Lumeo

API Reference

Code

Property Type Default Description
Variant string "inline" Render style. inline renders as a pill; block renders as a full-width scrollable block.
Size string? null Tailwind text-size suffix (e.g. xs, sm, base, lg). Overrides the component default font size.
ChildContent RenderFragment? null The code content to display.
Class string? null Additional CSS classes merged onto the root element.

Related Components

  • Text — Paragraph text with size, color, and weight props.
  • Heading — Semantic h1–h6 with Lumeo typographic scale.