# Code block Code on display glass. A bar along the top holds the file name on a tab, with a lit edge under it, and the copy key at the far end. Under it the lines run, each with its number engraved in a gutter that stays where it is when a long line scrolls sideways. The numbers are drawn by the stylesheet, so they are never selected, never copied and never read aloud. Highlighting is optional and small: a few strengths of the display’s own light, told apart by weight and italic, never a colour of its own. Kit part · Free · https://tactileui.dev/parts/code-block - Element: `

` - Needs: `kit.css` and `kit.mjs` ([how to install the kit](https://tactileui.dev/docs/installation#the-kit)) - Categories: Code & devtools - Finishes: Aluminium, Graphite, Oak, Walnut, Porcelain, Black, Daylight, Night, Paper, Phosphor, E-paper, AMOLED - Volumes: Tactile, Quiet ## Variants ### With a file name · lit JavaScript ```html

feed.mjs

import { connect } from '@northwind/cli';

// Open the harbour feed and log each berth change.
const feed = await connect({ site: 'quay-street', retries: 3 });
feed.on('berth', (change) => {
  console.log('Berth ' + change.id + ' is now ' + change.state);
});

``` ### A language legend, no file name · shell ```html

$ npm install @northwind/cli
$ northwind init quay-street
$ northwind deploy --dry-run   # nothing is changed

``` ### Plain text · no data-lang, nothing lit ```html

northwind.json

{
  "site": "quay-street",
  "retries": 3,
  "berths": ["A1", "A2", "B1"],
  "dryRun": true
}

``` ### A long line scrolls sideways, the gutter stays ```html

schedule.js

const schedule = 'https://harbour.northwind.example/api/v2/berths/quay-street/schedules?from=2026-10-07&to=2026-10-14&include=tides,pilots,tugs,fuel';
const rows = await fetch(schedule).then((r) => r.json());

``` ### From line 24, with two lines marked ```html

feed.mjs

import { connect } from '@northwind/cli';

// Open the harbour feed and log each berth change.
const feed = await connect({ site: 'quay-street', retries: 3 });
feed.on('berth', (change) => {
  console.log('Berth ' + change.id + ' is now ' + change.state);
});

``` ### No gutter · .tui-code-block--bare ```html

$ npm install @northwind/cli
$ northwind init quay-street
$ northwind deploy --dry-run   # nothing is changed

``` ### A fixed height scrolls both ways · --cb-max ```html

feed.mjs

import { connect } from '@northwind/cli';

// Open the harbour feed and log each berth change.
const feed = await connect({ site: 'quay-street', retries: 3 });
feed.on('berth', (change) => {
  console.log('Berth ' + change.id + ' is now ' + change.state);
});

feed.mjs

import { connect } from '@northwind/cli';
const feed = await connect({ site: 'quay-street' });

``` ```js import { codeBlockHTML } from '/kit/kit.mjs'; // Write the whole block from a string: host.innerHTML = codeBlockHTML({ code, file: 'feed.mjs', lang: 'js', mark: [4] }); // Or write plain text in

 and kit.mjs splits it into lines and lights it.
```

The demo on the page:

```html
feed.mjs
import { connect } from '@northwind/cli';

// Open the harbour feed and log each berth change.
const feed = await connect({ site: 'quay-street', retries: 3 });
feed.on('berth', (change) => {
  console.log('Berth ' + change.id + ' is now ' + change.state);
});

```

## Usage notes

Press Copy and paste somewhere: the text comes without its numbers. Select a few lines with the pointer: the numbers are not in the selection. Scroll the long line sideways with the pointer or, with the keyboard, Tab to the lines and press the arrow keys: the gutter stays in place.

## Accessibility

- The line numbers are drawn by the stylesheet with an empty alternative text, so a screen reader reads the code and not a count down the side, and copying or selecting the code never picks them up. The code itself is real text in a real `` element, so nothing is lost to find in the page.
- The scrolling region is a stop of its own with a name, so a keyboard user can reach it and scroll long lines with the arrow keys. It has a visible 2px ring in the display’s own light.
- Lit tokens are never the only difference: a keyword is bold, a comment is italic and dimmer, and every strength is above 4.5:1 on the glass in every finish. A marked line has a bar at its edge as well as a lift of light.
- The copy key is the kit’s: it says Copied aloud, and when the browser refuses the clipboard it selects the text for the keyboard instead. The file name is the figure’s caption, so the block is named.
- On a phone the key is 44px, long lines scroll inside the block and the page itself never scrolls sideways.

## How it’s built

It is `.tui-glass`, so the glass, its scan lines, its ink and its focus light are the kit’s in every finish and volume. The gutter is a CSS counter on each line, drawn as a sticky plate over the lines that pass under it, with an engraved edge. The highlighter is a single pattern in `code-block.mjs`: it is not a parser, and a line it misreads is still the right text.

## Rules

Show code the way a lit display shows it: a file name tab, numbered lines in a gutter that holds still, a copy key, and long lines that scroll instead of wrapping.

The full rules are in `code-block.rules.md` in the brain, which ships with the Kit.

## Related parts

- [Glass](https://tactileui.dev/parts/glass): Dark display glass for plots and live readouts, whatever the finish around it. Everything printed inside it is lit.
- [Copy key](https://tactileui.dev/parts/copy-key): A key that copies a value and says so. Its lamp sits dark in the cap; when the text is on the clipboard the lamp lights, winks once, and the legend says Copied before it goes back to Copy. If the browser refuses the clipboard, the text is selected for the keyboard and the lamp lights amber.
- [Kbd](https://tactileui.dev/parts/kbd): The key to press, drawn as the key: a small cap on a skirt with a dish worked into its top. Shortcuts come as combos and follow the platform, so ⌘ K on a Mac is Ctrl K elsewhere.