Code

Inline code or a block, highlighted on the server.

A static page with IzzyBlazor's script. No circuit.

Code: inline (a <code> in running text) or a Block (<pre><code>) that scrolls sideways. A block's copy button needs script, so it shows only where the browser runs script (from the first paint, so the block doesn't change when IzzyBlazor's script arrives; it copies once that has loaded); with JavaScript off the code is still there to select and copy by hand.

Usage

razor

<Code>dotnet run</Code>
<Code Block Language="csharp" Title="Program.cs">builder.Services.AddIzzyBlazor();</Code>

Inline and block

Use Code alone for names in running text, and Block for code on its own lines that scrolls sideways.

Preview Code

Preview

Install the package, then call AddIzzyBlazor() in Program.cs.

bash

dotnet add package IzzyBlazor --prerelease

Code

InlineBlock.razor

<Stack Gap="4" Grow>
    <TextBlock>Install the package, then call <Code>AddIzzyBlazor()</Code> in <Code>Program.cs</Code>.</TextBlock>
    <Code Block Language="bash">dotnet add package IzzyBlazor --prerelease</Code>
</Stack>

Syntax highlighting

Use Language to color the code on the server: C#, Razor, HTML, CSS, JavaScript, TypeScript, JSON and shell.

Preview Code

Preview

csharp

public sealed record Order(string Customer, decimal Total)
{
    // Large orders need a second approval.
    public bool IsLarge => Total > 500m;
}

css

:root {
  --ib-color-focus: #7c3aed;
  --ib-radius-xl: 0.5rem;
}

json

{ "Logging": { "LogLevel": { "Default": "Information" } }, "AllowedHosts": "*" }

Code

Languages.razor

<Stack Gap="4" Grow>
    <Code Block Language="csharp">@CSharp</Code>
    <Code Block Language="css">@Css</Code>
    <Code Block Language="json">@Json</Code>
</Stack>

File name, line numbers and highlights

Use Title for a file name, LineNumbers to number the lines and HighlightLines to mark some, such as "2,9".

Preview Code

Preview

Program.cs

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddIzzyBlazor();
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();
app.MapIzzyBlazor();

app.Run();

Code

Lines.razor

<Code Block Language="csharp" Title="Program.cs" LineNumbers HighlightLines="2,9" Grow>@Startup</Code>

Details

With a Language the highlighter knows (C#, Razor, HTML, CSS, JavaScript/TypeScript, JSON, shell), the code is colored on the server: spans with ib-tok-* classes, so it works with no script and never flashes plain first.

LineNumbers and HighlightLines put each line in its own span (a <mark> when highlighted), with its newline inside, so copying still gives the code as written; the numbers are CSS counters, never selected or copied. A Title turns the floating bar into a header row.

Mode support

What works in each mode, Code
Feature	Off	Static	Live
Everything	Partly	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto). With JavaScript off, code blocks have no copy button.

Accessibility

Inline code is a code; a block is a pre holding a code.
A block is a tab stop, so a long line or a block with MaxHeight can be scrolled from the keyboard. It's a group named by its Title, or "Code" without one.
The copy button is named "Copy code" (CopyLabel); after copying, it shows a check for a moment and "Copied" (CopiedLabel) is announced politely.
With JavaScript off there's no copy button; the code is still there to select.
Line numbers are CSS with empty alt text, so they're never copied and screen readers skip them where the browser supports it.

Parameters

Code parameters
Prop	Type	Default
`ChildContent`The code.	`RenderFragment?`
`Block`A block of code on its own lines (pre), scrolling sideways when long.	`bool`	`false`
`MaxHeight`The tallest a block gets before its code scrolls, such as Length.Rem(20) for a long file.	`Length?`
`Language`The language, such as "razor", "csharp", "css" or "bash": shown above a block, and used to color the code when the highlighter knows it (see Languages).	`string?`
`Highlight`Colors the code by Language.	`bool`	`true`
`Title`A file name or caption for a block, such as "Program.cs", shown in a header row above the code in place of Language (which still sets the colors).	`string?`
`LineNumbers`Numbers a block's lines.	`bool`	`false`
`HighlightLines`Lines of a block to highlight, by number from 1: single lines and ranges, such as "3-5,9".	`string?`
`Copyable`Adds a copy button to a block (with JavaScript).	`bool`	`true`
`CopyLabel`The copy button's name.	`string?`	`"Copy code"`
`CopiedLabel`Announced after copying.	`string?`	`"Copied"`

Plus 16 item props and 4 common props.

Full API