# AiCodeBlockView
**Also known as:** CodeBlock
## Description
BitAiCodeBlockView shows a block of code with a header naming its language or file, a copy button, and syntax highlighting for fifteen languages and their aliases out of the box. Highlighting is deferred while the block is still streaming - colors that shift as the lexer changes its mind about an unterminated string are worse than none - and applied once, the moment the block is complete. Every token kind is painted with a role color of the theme and restyled through a public CSS variable of its own. Every fenced code block of a BitAiMarkdownView is one, unless the app registered a renderer of its own for its language.
## Parameters
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Classes | `BitAiCodeBlockViewClassStyles?` | null | Custom CSS classes for different parts of the code block. |
| Code | `string` | string.Empty | The source to display. It is rendered as text, never as markup, and it is what the copy button copies - exactly, without the line numbers. |
| FileName | `string?` | null | A file name shown in the header in place of the language (which still picks the highlighter). |
| IsStreaming | `bool` | false | Whether the block is still receiving content, which holds the highlighting back: the code is shown as plain text while it is true, and highlighted once when it turns false. |
| Language | `string?` | null | The language identifier used to pick a highlighter (an id or alias of BitAiLanguageRegistry, matched without regard to case; an unknown one is plain text), also shown in the header when there is no file name - text when it is null too. |
| ShowHeader | `bool` | true | Shows the header bar with the language (or file name) and the copy button. The copy button also needs BitAiUiOptions.ShowCodeCopy, which is on by default. |
| Styles | `BitAiCodeBlockViewClassStyles?` | null | Custom CSS styles for different parts of the code block. |
| AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. |
| Disabled | `bool` | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
## Public Members
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. |
## Enums
### BitAiTokenKind Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Plain | 0 | Text with no special meaning: no span of its own, the color of the code. |
| Keyword | 1 | A language keyword: bit-aicbv-kwd, --bit-AiCodeBlockView-keyword-color. |
| Type | 2 | A built-in or well-known type name: bit-aicbv-typ, --bit-AiCodeBlockView-type-color. |
| String | 3 | A string literal, including interpolated ones: bit-aicbv-str, --bit-AiCodeBlockView-string-color. |
| Number | 4 | A numeric literal: bit-aicbv-num, --bit-AiCodeBlockView-number-color. |
| Comment | 5 | A comment, set in italics: bit-aicbv-cmt, --bit-AiCodeBlockView-comment-color. |
| Operator | 6 | An operator: bit-aicbv-opr, --bit-AiCodeBlockView-operator-color. |
| Punctuation | 7 | Brackets, commas and semicolons: bit-aicbv-pnc, --bit-AiCodeBlockView-punctuation-color. |
| Function | 8 | An identifier in call position, a command: bit-aicbv-fnc, --bit-AiCodeBlockView-function-color. |
| Property | 9 | A property or field name, including a JSON key: bit-aicbv-prp, --bit-AiCodeBlockView-property-color. |
| Tag | 10 | A markup tag name: bit-aicbv-tag, --bit-AiCodeBlockView-tag-color. |
| Attribute | 11 | A markup attribute name, or an annotation: bit-aicbv-atr, --bit-AiCodeBlockView-attribute-color. |
| Constant | 12 | A language constant such as a boolean or null literal: bit-aicbv-cst, --bit-AiCodeBlockView-constant-color. |
| Inserted | 13 | An added line in a diff: bit-aicbv-ins, --bit-AiCodeBlockView-inserted-color. |
| Deleted | 14 | A removed line in a diff: bit-aicbv-del, --bit-AiCodeBlockView-deleted-color. |
| Meta | 15 | A file header or hunk marker in a diff: bit-aicbv-met, --bit-AiCodeBlockView-meta-color. |
| Label | 16 | A lifetime or loop label, such as Rust's 'a or 'outer, set in italics: bit-aicbv-lab, --bit-AiCodeBlockView-label-color. |
| Variable | 17 | A variable introduced by a sigil, such as PowerShell's $name: bit-aicbv-vrb, --bit-AiCodeBlockView-variable-color. |
### BitVisibility Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
### BitDir Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
## Sub Classes
### BitAiCodeBlockViewClassStyles Properties
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Root | `string?` | null | Custom CSS classes/styles for the root element of the BitAiCodeBlockView. |
| Header | `string?` | null | Custom CSS classes/styles for the header bar of the BitAiCodeBlockView, which holds the language and the copy button. |
| Label | `string?` | null | Custom CSS classes/styles for the language (or file name) label in the header of the BitAiCodeBlockView. |
| CopyButton | `BitAiCopyButtonClassStyles?` | null | Custom CSS classes/styles for the copy button (a BitAiCopyButton) in the header of the BitAiCodeBlockView. |
| Body | `string?` | null | Custom CSS classes/styles for the scroll container of the code of the BitAiCodeBlockView. |
| Pre | `string?` | null | Custom CSS classes/styles for the pre element of the BitAiCodeBlockView. |
| Code | `string?` | null | Custom CSS classes/styles for the code element of the BitAiCodeBlockView (which also carries the class language-<Language>). |
| Line | `string?` | null | Custom CSS classes/styles for every numbered line of the BitAiCodeBlockView (rendered only while BitAiUiOptions.ShowLineNumbers is on). |
### BitAiBuiltInLanguages Properties
The languages registered by default, chosen by what models write in chat: application languages, the data formats around them and the shell. Each is a static BitAiLanguageDefinition property, registered under its id and every alias; anything else falls back to plain text.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| CSharp | `BitAiLanguageDefinition` | | csharp - aliases cs, c#, dotnet. |
| JavaScript | `BitAiLanguageDefinition` | | javascript, TypeScript included - aliases js, jsx, typescript, ts, tsx, mjs, cjs. |
| Python | `BitAiLanguageDefinition` | | python - aliases py, python3. |
| Json | `BitAiLanguageDefinition` | | json, keys highlighted as properties - aliases jsonc, json5. |
| Html | `BitAiLanguageDefinition` | | html, with the tag-aware scanner - aliases xml, svg, xhtml, razor, cshtml, vue. |
| Css | `BitAiLanguageDefinition` | | css - aliases scss, sass, less. |
| Sql | `BitAiLanguageDefinition` | | sql, matched without regard to case - aliases postgresql, mysql, tsql, sqlite, plsql. |
| Shell | `BitAiLanguageDefinition` | | bash - aliases sh, shell, zsh, console. |
| PowerShell | `BitAiLanguageDefinition` | | powershell, with $variables and hyphenated commands - aliases ps1, pwsh, ps, posh. |
| Go | `BitAiLanguageDefinition` | | go - alias golang. |
| Rust | `BitAiLanguageDefinition` | | rust, with lifetimes and labels - alias rs. |
| Java | `BitAiLanguageDefinition` | | java - aliases kotlin, kt, groovy, scala. |
| Yaml | `BitAiLanguageDefinition` | | yaml - alias yml. |
| Toml | `BitAiLanguageDefinition` | | toml - aliases ini, cfg, conf, properties, editorconfig. |
| Diff | `BitAiLanguageDefinition` | | diff, with added, removed and header lines - alias patch. |
| All | `IReadOnlyList<BitAiLanguageDefinition>` | | Every built-in language, in the order above. |
### BitAiLanguageRegistry Properties
The static registry of the languages the highlighter knows, keyed by id and alias without regard to case. It starts with BitAiBuiltInLanguages.All; register once, at startup.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Register(BitAiLanguageDefinition language) | `void` | | Adds a language, or replaces the one of the same id - under every alias it was registered with too, so ```cs follows a replaced csharp. |
| Find(string? name) | `BitAiLanguageDefinition?` | | The language registered under an id or alias, or null. |
| IsSupported(string? name) | `bool` | | Whether a language is registered under the name, which is whether a block of it is highlighted. |
| All | `IReadOnlyCollection<BitAiLanguageDefinition>` | | The distinct registered languages, ordered by id. |
### BitAiLanguageDefinition Properties
Describes a language well enough to highlight it: a lexical description rather than a grammar, which colors the fragments a chat holds correctly and never fails on incomplete input. Created with new BitAiLanguageDefinition(id), the rest set as init-only properties.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Id | `string` | | The canonical identifier, matching the fence info string. Set through the constructor; it cannot be blank. |
| Aliases | `IReadOnlyList<string>` | [] | Other names that select this language. |
| Keywords | `IReadOnlySet<string>` | empty | Words highlighted as keywords (a hyphenated word too, where HyphenatedCommands is on). |
| Types | `IReadOnlySet<string>` | empty | Words highlighted as type names. |
| Constants | `IReadOnlySet<string>` | empty | Words highlighted as constants, such as boolean and null literals. |
| LineComments | `IReadOnlyList<string>` | ["//"] | Sequences that start a comment running to the end of the line. |
| BlockComments | `IReadOnlyList<(string Open, string Close)>` | [("/*", "*/")] | Paired sequences that delimit a block comment. |
| StringDelimiters | `IReadOnlyList<char>` | ['"', '\''] | Characters that delimit a string literal. |
| StringEscapes | `bool` | true | Whether StringEscapeCharacter escapes the next character inside a string. |
| StringEscapeCharacter | `char` | '\\' | The character that escapes the next one inside a string: a backslash in most languages, a backtick in PowerShell. |
| MultiLineStrings | `bool` | false | Whether a string literal may span lines. |
| IsMarkup | `bool` | false | Whether the language is markup, which switches to the tag-aware scanner (tags, attributes, attribute values). |
| ColonProperties | `bool` | false | Whether identifiers before a colon are highlighted as properties, as in JSON and YAML. |
| IgnoreCase | `bool` | false | Whether words are matched case-insensitively, as in SQL. |
| AnnotationPrefix | `char?` | null | The character that introduces an annotation or attribute, such as @. A [ only counts at the start of a line, as C# attributes are written; a # may be followed by [ or ![, as Rust attributes are. |
| Lifetimes | `bool` | false | Whether an apostrophe before a name is a lifetime or label rather than an unterminated character literal, as in Rust's 'a and 'outer:. |
| UrlFunctions | `bool` | false | Whether url(...) holds a string even when unquoted, as in CSS, so the // of an address is not read as a comment. |
| VariablePrefix | `char?` | null | The character that introduces a variable, such as PowerShell's $: the sigil and the name after it, or a braced name such as ${my var}, are one variable token. |
| HyphenatedCommands | `bool` | false | Whether hyphenated words are commands and switches, as in PowerShell: Get-ChildItem is a function and -Recurse a parameter, while a hyphenated word listed in Keywords, such as -eq, is a keyword. |
### BitAiSyntaxHighlighter Properties
The static highlighter the code block uses, for an app that colors code anywhere else.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Highlight(string? code, string? language) | `IReadOnlyList<BitAiCodeToken>` | | The tokens of the code in the language registered under that id or alias (BitAiLanguageRegistry), in order; none for an empty code or a language that is not registered. It never fails on incomplete code. |
### BitAiCodeToken Properties
One highlighted span of the code, a readonly record struct: offsets rather than substrings, so highlighting a large file allocates one list rather than a string per token.
| Name | Type | Default Value | Description |
| :--- | :--- | :------------ | :---------- |
| Kind | `BitAiTokenKind` | | The category of the token, which selects its CSS class. |
| Start | `int` | | Where the token starts in the code, in UTF-16 code units. |
| Length | `int` | | How long the token is. |
| Slice(string source) | `ReadOnlySpan<char>` | | The text of the token, read from the code it was produced from. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance to restyle it and every instance nested inside it, which inherits the value too - a parameter changes one alone, as does the real CSS property on its `Style` / `Styles` when that property does not inherit (`opacity`); an inherited one (`color`, `font-family`) reaches the nested instances that do not set it themselves.
| Name | Default Value | Description |
| :--- | :------------ | :---------- |
| `--bit-AiCodeBlockView-background` | 4% of var(--bit-clr-fg-pri) | Background of the block: a translucent wash of the text color, so it reads on whatever the message sits on. |
| `--bit-AiCodeBlockView-color` | inherit | Text color of the code (and of the plain text between the tokens). |
| `--bit-AiCodeBlockView-border-color` | var(--bit-clr-brd-sec) | Border of the block and the line under its header. |
| `--bit-AiCodeBlockView-radius` | var(--bit-shp-radius-surface) | Corner radius of the block. |
| `--bit-AiCodeBlockView-header-background` | 4% of var(--bit-clr-fg-pri) | Background of the header bar. |
| `--bit-AiCodeBlockView-header-color` | var(--bit-clr-fg-sec) | Text color of the header bar. |
| `--bit-AiCodeBlockView-padding` | spacing(1.5) | Padding around the code. |
| `--bit-AiCodeBlockView-font-family` | var(--bit-tpg-font-family-mono) | Font of the code and of the header label. |
| `--bit-AiCodeBlockView-font-size` | var(--bit-tpg-fs-sm) | Text size of the code. |
| `--bit-AiCodeBlockView-line-number-color` | var(--bit-clr-fg-ter) | Color of the line numbers. |
| `--bit-AiCodeBlockView-keyword-color` | var(--bit-clr-pri-fg) | Color of the keywords. |
| `--bit-AiCodeBlockView-type-color` | var(--bit-clr-suc-fg) | Color of the type names. |
| `--bit-AiCodeBlockView-string-color` | var(--bit-clr-swr-fg) | Color of the string and character literals. |
| `--bit-AiCodeBlockView-number-color` | var(--bit-clr-sec-fg) | Color of the numeric literals. |
| `--bit-AiCodeBlockView-comment-color` | color-mix(in srgb, var(--bit-clr-fg-ter), var(--bit-clr-fg-pri) 15%) | Color of the comments (set in italics). The tertiary text color has a little of the text color mixed in, which keeps it legible on the tint of the block. |
| `--bit-AiCodeBlockView-function-color` | color-mix(in srgb, var(--bit-clr-wrn-fg), var(--bit-clr-fg-pri) 15%) | Color of the function and command names. The warning shade has a little of the text color mixed in, which keeps it legible on the tint of the block. |
| `--bit-AiCodeBlockView-operator-color` | var(--bit-clr-fg-sec) | Color of the operators. |
| `--bit-AiCodeBlockView-punctuation-color` | var(--bit-clr-fg-sec) | Color of the punctuation. |
| `--bit-AiCodeBlockView-property-color` | var(--bit-clr-pri-fg) | Color of the keys and properties (JSON, YAML, CSS). |
| `--bit-AiCodeBlockView-tag-color` | var(--bit-clr-err-fg) | Color of the markup tags. |
| `--bit-AiCodeBlockView-attribute-color` | var(--bit-clr-sec-fg) | Color of the markup attributes and the annotations. |
| `--bit-AiCodeBlockView-constant-color` | var(--bit-clr-sec-fg) | Color of true, false, null and the other constants. |
| `--bit-AiCodeBlockView-inserted-color` | var(--bit-clr-suc-fg) | Color of the lines a diff adds. |
| `--bit-AiCodeBlockView-deleted-color` | var(--bit-clr-err-fg) | Color of the lines a diff removes. |
| `--bit-AiCodeBlockView-meta-color` | color-mix(in srgb, var(--bit-clr-fg-ter), var(--bit-clr-fg-pri) 15%) | Color of the file headers and the hunk markers of a diff. The tertiary text color has a little of the text color mixed in, as the comments' has. |
| `--bit-AiCodeBlockView-label-color` | the type color | Color of the lifetimes and loop labels (set in italics); it falls back to --bit-AiCodeBlockView-type-color. |
| `--bit-AiCodeBlockView-variable-color` | the property color | Color of the variables written with a sigil ($name); it falls back to --bit-AiCodeBlockView-property-color. |
## Examples
\n**Basic**:
```razor
());
var app = builder.Build();
app.Run();
""";
```
\n**File name**:
```razor
Stream the code
```
```csharp
private const string csharpCode = """
using Bit.BlazorUI;
// Registers the AI components with a transport of your own.
builder.Services.AddBitBlazorUIAIServices(ai => ai.UseTransport());
var app = builder.Build();
app.Run();
""";
private bool showLineNumbers = true;
private bool showCodeCopy = true;
private BitAiUiOptions codeOptions => BitAiUiOptions.Default with { ShowLineNumbers = showLineNumbers, ShowCodeCopy = showCodeCopy };
```
\n**Languages**:
```razor
> languageItems =
[.. BitAiBuiltInLanguages.All.Select(language => new BitDropdownItem { Text = language.Id, Value = language.Id })];
private string? selectedLanguage = "csharp";
private string SelectedAliases => string.Join(", ", BitAiLanguageRegistry.Find(selectedLanguage)?.Aliases ?? []);
private string SelectedSample => languageSamples.GetValueOrDefault(selectedLanguage ?? string.Empty, string.Empty);
private static readonly Dictionary languageSamples = new()
{
["csharp"] = """
[Authorize]
public sealed record Message(string Author, string Text, DateTimeOffset At)
{
public bool IsRecent => DateTimeOffset.UtcNow - At < TimeSpan.FromMinutes(5);
}
""",
["javascript"] = """
// Debounces a function by the given delay.
export function debounce(fn, delay = 250) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
""",
["python"] = pythonCode,
["json"] = jsonCode,
["html"] = """
""",
["css"] = """
.card:hover {
color: var(--bit-clr-pri);
box-shadow: 0 2px 8px rgb(0 0 0 / 0.2) !important;
background: url(https://example.com/bg.png) no-repeat;
}
""",
["sql"] = """
-- The ten most active users this month.
SELECT u.name, COUNT(*) AS messages
FROM users u
JOIN messages m ON m.user_id = u.id
WHERE m.created_at >= '2026-10-01'
GROUP BY u.name
ORDER BY messages DESC
LIMIT 10;
""",
["bash"] = """
#!/usr/bin/env bash
set -euo pipefail
for project in src/*/; do
echo "Building $project"
dotnet build "$project" --configuration Release
done
""",
["powershell"] = """
# Lists the largest files under a folder.
$root = Join-Path $env:USERPROFILE "Downloads"
Get-ChildItem -Path $root -Recurse -File |
Where-Object { $_.Length -gt 10MB } |
Sort-Object Length -Descending
""",
["go"] = """
package main
import "fmt"
func main() {
for i := 0; i < 3; i++ {
fmt.Println("tick", i)
}
}
""",
["rust"] = """
#[derive(Debug)]
struct Token<'a> { text: &'a str }
fn longest<'a>(x: &'a str, y: &'a str) -> &'a str {
if x.len() > y.len() { x } else { y }
}
""",
["java"] = """
@Override
public String toString() {
// A readable form for the logs.
return String.format("User[id=%d, name=%s]", id, name);
}
""",
["yaml"] = """
# A GitHub Actions job.
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: dotnet test --no-restore
continue-on-error: false
""",
["toml"] = """
# Project settings.
[package]
name = "chat"
version = "0.3.1"
publish = false
""",
["diff"] = """
--- a/Program.cs
+++ b/Program.cs
@@ -1,3 +1,3 @@
-builder.Services.AddBitBlazorUIServices();
+builder.Services.AddBitBlazorUIAIServices();
var app = builder.Build();
""",
};
```
\n**Custom language**:
```razor
(["query", "mutation", "subscription", "fragment", "on", "type", "input", "enum", "schema", "extend", "implements", "interface", "union", "scalar", "directive"], StringComparer.Ordinal),
Types = new HashSet(["ID", "String", "Int", "Float", "Boolean"], StringComparer.Ordinal),
Constants = new HashSet(["true", "false", "null"], StringComparer.Ordinal),
LineComments = ["#"],
BlockComments = [],
StringDelimiters = ['"'],
AnnotationPrefix = '@',
};
private const string graphQlCode = """
# The conversations of the signed-in user.
query Conversations($first: Int = 20) @cached(ttl: 60) {
conversations(first: $first, archived: false) {
id
title
messages(last: 1) { text createdAt }
}
}
""";
protected override void OnInitialized()
{
BitAiLanguageRegistry.Register(graphQl);
}
```
\n**Token colors**:
```razor
```
```csharp
private readonly BitAiCodeBlockViewParams[] codeBlockParams = [new() { ShowHeader = false }];
```
\n**Style & Class**:
```razor
Aliases: @SelectedAliases
@foreach (var token in BitAiSyntaxHighlighter.Highlight(highlighterCode, "csharp"))
{
@token.Kind
```
```csharp
private string? highlighterCode = "var total = Math.Max(count, 1) * 2; // never zero";
```
\n**Disabled**:
```razor
@(token.Slice(highlighterCode!).ToString())
}