Basic usage

var name = "BlazOrbit";
Console.WriteLine($"Hello {name}!");

<BOBCodeBlock Language="SyntaxHighlightLanguage.CSharp"
              Code="@("var name = \"BlazOrbit\";\nConsole.WriteLine($\"Hello {name}!\");")" />

Languages

Pick from any SyntaxHighlightLanguage — CSharp, Razor, TypeScript, Css, Json.

<BOBButton Text="Save" />

.bob-demo { color: var(--palette-primary); }

{ "name": "BlazOrbit", "version": "1.0.0" }

<BOBCodeBlock Language="SyntaxHighlightLanguage.Razor" Code="@("<BOBButton Text=\"Save\" />")" />
<BOBCodeBlock Language="SyntaxHighlightLanguage.Css" Code="@(".bob-demo { color: var(--palette-primary); }")" />
<BOBCodeBlock Language="SyntaxHighlightLanguage.Json" Code="@("{\n  \"name\": \"BlazOrbit\",\n  \"version\": \"1.0.0\"\n}")" />

Custom title

Set Title to override the language badge with a filename or custom label.

builder.Services.AddBlazOrbit();
await builder.Build().RunAsync();

<BOBCodeBlock Title="Program.cs"
              Language="SyntaxHighlightLanguage.CSharp"
              Code="@("builder.Services.AddBlazOrbit();\nawait builder.Build().RunAsync();")" />

Sizes

<BOBButton Text="Small" />

<BOBButton Text="Medium" />

<BOBButton Text="Large" />

<BOBCodeBlock Size="BOBSize.Small" Language="SyntaxHighlightLanguage.Razor" Code='@("<BOBButton Text=\"Small\" />")' />
<BOBCodeBlock Size="BOBSize.Medium" Language="SyntaxHighlightLanguage.Razor" Code='@("<BOBButton Text=\"Medium\" />")' />
<BOBCodeBlock Size="BOBSize.Large" Language="SyntaxHighlightLanguage.Razor" Code='@("<BOBButton Text=\"Large\" />")' />

Border

// Rounded large

// Primary border

// Dotted border

<BOBCodeBlock Language="SyntaxHighlightLanguage.CSharp"
              Code="@("// Rounded large")"
              Border="@BOBBorderPresets.RoundedLarge" />
<BOBCodeBlock Language="SyntaxHighlightLanguage.CSharp"
              Code="@("// Primary border")"
              Border="@BOBBorderPresets.Primary" />
<BOBCodeBlock Language="SyntaxHighlightLanguage.CSharp"
              Code="@("// Dotted border")"
              Border="@BOBBorderPresets.Dotted" />

Properties

Property	Type	Default	Description
`Code`	`string`	`string.Empty`	Source code to render and highlight. Required.
`Language`	`SyntaxHighlightLanguage`	`SyntaxHighlightLanguage.CSharp`	Language.
`Title`	`string?`		Tooltip text displayed on hover.
`Size`	`BOBSize`	`BOBSize.Medium`	Visual size of the code block.
`Border`	`BorderStyle?`		Border style applied to the code block edge.
`BackgroundColor`	`string?`		Background color of the code block. Accepts any valid CSS color value.