Home
Components
Code Block

Code Block

MokaCodeBlock renders a syntax-highlighted code snippet with optional line numbers, a language label, and a copy button. Ideal for documentation pages, code samples, and technical dashboards.

Parameters

Name	Type	Default	Description
`Code`	`string`	required	The source code to display
`Language`	`string?`	`null`	Language label shown in the header (e.g. `"csharp"`, `"json"`)
`ShowLineNumbers`	`bool`	`true`	Show line number gutter
`ShowCopyButton`	`bool`	`true`	Show a copy-to-clipboard button
`MaxHeight`	`string?`	`null`	CSS max-height for scrollable overflow (e.g. `"300px"`)
`Wrap`	`bool`	`false`	Wrap long lines instead of horizontal scrolling
`Class`	`string?`	--	Additional CSS classes
`Style`	`string?`	--	Additional inline styles

Basic C# Code

<MokaCodeBlock Code="@_csharp" Language="csharp" />

@code {
    private string _csharp = @"public class HelloWorld
{
    public static void Main(string[] args)
    {
        Console.WriteLine(""Hello, World!"");
    }
}";
}

1public class HelloWorld
2{
3    public static void Main(string[] args)
4    {
5        Console.WriteLine("Hello, World!");
6    }
7}

With Language Label

<MokaCodeBlock Code="@_json" Language="json" />

@code {
    private string _json = @"{
  ""name"": ""Moka.Red"",
  ""version"": ""0.1.2"",
  ""description"": ""Blazor UI component library""
}";
}

1{
2  "name": "Moka.Red",
3  "version": "0.1.2",
4  "description": "Blazor UI component library"
5}

No Line Numbers

<MokaCodeBlock Code="@_cmd" ShowLineNumbers="false" />

@code {
    private string _cmd = "dotnet add package Moka.Red";
}

dotnet add package Moka.Red

Max Height with Scroll

<MokaCodeBlock Code="@_long" Language="csharp" MaxHeight="150px" />

@code {
    private string _long = string.Join("\n", Enumerable.Range(1, 30).Select(i => $"// Line {i}: some code here"));
}

1// Line 1: some code here
2// Line 2: some code here
3// Line 3: some code here
4// Line 4: some code here
5// Line 5: some code here
6// Line 6: some code here
7// Line 7: some code here
8// Line 8: some code here
9// Line 9: some code here
10// Line 10: some code here
11// Line 11: some code here
12// Line 12: some code here
13// Line 13: some code here
14// Line 14: some code here
15// Line 15: some code here
16// Line 16: some code here
17// Line 17: some code here
18// Line 18: some code here
19// Line 19: some code here
20// Line 20: some code here
21// Line 21: some code here
22// Line 22: some code here
23// Line 23: some code here
24// Line 24: some code here
25// Line 25: some code here
26// Line 26: some code here
27// Line 27: some code here
28// Line 28: some code here
29// Line 29: some code here
30// Line 30: some code here

Wrapped Lines

<MokaCodeBlock Code="@_wide" Language="text" Wrap="true" />

@code {
    private string _wide = "This is a very long line of text that would normally scroll horizontally, but with Wrap enabled it will break to fit the container width instead of overflowing.";
}

1This is a very long line of text that would normally scroll horizontally, but with Wrap enabled it will break to fit the container width instead of overflowing.

Last updated: 2026-04-11