#CodeBlock

A CodeBlock shows source code, or other text where the spaces matter. It uses a monospace font and keeps the indentation. It has line numbers, a title and a button that copies the code to the clipboard. Use it for a console command in a help screen, for a mod script, or for a save code that the player shares.

<tb:CodeBlock title="Inventory.uxml" code="&lt;ui:Label text=&quot;12 items&quot; /&gt;&#10;&lt;tb:Rating value=&quot;4&quot; /&gt;" />

var block = new CodeBlock { Title = "C#", Language = CodeLanguage.CSharp, Code = "if (ready)\n\tstart();" };
block.Copied += code => Debug.Log($"Copied {code.Length} characters");
panel.Add(block);

• A line that is wider than the block does not wrap. The code scrolls sideways.
• The user can select a part of the code with the pointer and copy it with Ctrl+C.
• A block with no title and no copy button has no header.
• With no Language, the control shows the code in one color.

Tips:

• In UXML, write a line end as 
, a < as < and a " as ". For more than a few lines, set Code from the controller. A text file of the project gives the code with textAsset.text.
• The block is as high as its lines. For long code, put the block in a ScrollView with a fixed height.
• The copy button shows a copy icon, and a check mark after a copy. Its tooltip is "Copy" or "Copied".
• The texts "Copy" and "Copied" are the ToolboxText keys tb.copy and tb.copied. See Localization.
• For a different font, set -unity-font-definition on .tb-code-block__numbers and .tb-code-block__text. Use a monospace font, and the same font for the two, so the numbers stay in line with the code.

#Syntax colors

Set Language and the control gives a color to each part of the code that it knows. The code itself does not change: Code, Copy() and Copied give the code with no colors, and the line numbers stay the same.

<tb:CodeBlock title="Player.cs" language="CSharp" code="var lives = 3; // at the start" />

block.Language = CodeLanguage.Json;

Each color is a custom property on the block. Set it on .tb-code-block, or on your own class of a block.

The control has two sets of default colors. It takes the set for a dark block when the background color of the block is dark, and the set for a light block when it is light. So the colors follow the theme. A property that you set replaces the default in the two sets.

.my-code {
    background-color: rgb(40, 42, 54);
    --tb-code-keyword: rgb(255, 121, 198);
    --tb-code-string: rgb(241, 250, 140);
    --tb-code-comment: rgb(98, 114, 164);
}
.my-code .tb-code-block__text { color: rgb(248, 248, 242); }

The words with no color of their own have the color of .tb-code-block__text.

Limits:

• The control reads the words of the code. It does not read their meaning. So the name of a class, a method or a field has the text color, but for a type name after new or class.
• There are four languages. You cannot add a language.
• Code of more than 20 000 characters shows in one color.
• A block with a transparent background takes the colors for a dark block. On a light panel, give the block a background color or set the properties.

#Styling

.tb-code-block { background-color: #101418; border-color: var(--tb-color-accent); }
.tb-code-block__text { color: #9be29b; }

#The copy button

The color of the icon is the color of the button:

.tb-code-block .tb-code-block__copy { color: var(--tb-color-accent); }

For your own icon, set an image. Set one for the state after a copy too:

.tb-code-block__copy-icon {
    background-image: url("Icons/clipboard.png");
    -unity-background-image-tint-color: var(--tb-color-text-muted);
}
.tb-code-block__copy--done .tb-code-block__copy-icon {
    background-image: url("Icons/check.png");
    -unity-background-image-tint-color: var(--tb-color-success);
}

For the text and no icon:

.tb-code-block .tb-code-block__copy-text { display: flex; }
.tb-code-block__copy-icon { display: none; }

Leave the icon on to show the icon and the text together.