# CodeBlock > Syntax-highlighted code with filename header, line numbers, highlighted lines and a copy button; Shiki loads lazily. Also InlineCode. Source: https://docs.nasaqui.com/components/code-block ## Install ```bash npx shadcn@latest add https://docs.nasaqui.com/r/code-block.json ``` A `
` holding a scrollable `
` of highlighted code. Highlighting uses Shiki, loaded with a dynamic
import the first time a block renders, and each language grammar is its own chunk. Until Shiki arrives the
block shows the same lines as plain text, so nothing shifts when colours appear. Colours come from Shiki's
CSS-variables theme, mapped to `--nq-*` tokens, so light and dark work with no second theme and no hex in source.
`InlineCode` is the inline counterpart for a word or command inside a sentence.

## When to use

- Snippets, commands, config and API examples in docs, chat and tutorials.
- A short token in running text: `InlineCode`.

## When not to use

- Copying a single value such as an API key: use `CopyField` from [copy-button](https://docs.nasaqui.com/components/copy-button).
- Rendering Markdown that contains code fences: use [Markdown](https://docs.nasaqui.com/components/markdown), which uses CodeBlock for you.
- Editable code: this component is read-only.

## Import

```tsx
import { CodeBlock, InlineCode } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"
```

## Quick start

```tsx
import { CodeBlock } from "@fadymondy/nasaq/web";

export function Example() {
  return  \`Hello, \${name}\`;`} />;
}
```

## Anatomy

```
CodeBlock            data-slot="code-block"          

├─ header            data-slot="code-block-header"   
 filename + CopyButton (when filename is set)
├─ CopyButton        data-slot="copy-button"         floats at the inline-end corner when there is no filename
└─ pre               data-slot="code-block-pre"      
   └─ code > span[data-line]                         one span per line, with optional gutter number
InlineCode           data-slot="inline-code"         
```

## API

### `CodeBlock`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` | required | Source text. One trailing newline is dropped. |
| `language?` | `CodeLanguage \| string` | `"text"` | `ts tsx js jsx json bash sh css html md go php python py sql yaml yml`. Unknown values render as plain text. |
| `filename?` | `string` | none | Renders a header. Also the accessible name of the code region. |
| `lineNumbers?` | `boolean` | `false` | Gutter with 1-based numbers. Not selectable, so copying gives clean code. |
| `highlightLines?` | `number[] \| string` | none | Emphasised lines: `[2, 3]` or `"2-4,7"`. |
| `copyable?` | `boolean` | `true` | Show the copy button. |
| `copyAction?` | `ReactNode` | none | Replaces the copy button (same place). Used by the AI copy menu in [code-block-variants](https://docs.nasaqui.com/components/code-block-variants). |
| `copyLabel?` | `string` | "Copy code" / "نسخ الشيفرة" | Accessible name of the copy button. |
| `label?` | `string` | filename, else "Code" / "شيفرة برمجية" | Accessible name of the scroll region. |
| `preClassName?` | `string` | none | Classes for the scrolling `
`, e.g. `max-h-80`. |
| `className?` | `string` | none | Merged onto the `
`. |

`dir` is fixed to `ltr` and cannot be overridden.

### `InlineCode`

`(props: ComponentProps<"code">) => JSX.Element`. Left-to-right, bidi-isolated, `font-mono`, on `bg-secondary`.

### `highlightCode(code, language)`

`(code: string, language: string) => Promise`. Tokenises with the shared lazy Shiki instance;
resolves `null` for plain text or an unknown language.

## Examples

### Highlighted lines and a fixed height

```tsx
import { CodeBlock } from "@fadymondy/nasaq/web";

export function Long() {
  return (
    
  );
}
```

### Arabic page, code stays left-to-right

```tsx
import { CodeBlock, InlineCode } from "@fadymondy/nasaq/web";

export function Install() {
  return (
    

      

        شغّل الأمر pnpm add @nasaq/web ثم أضف المزوّد.
      

      {children}"} />
    

  );
}
```

## Accessibility

| Key | Action |
| --- | --- |
| `Tab` | Focuses the code region, then the copy button |
| Arrow keys | Scroll the focused region |
| `Enter` / `Space` | Copies, on the copy button |

- The `
` is `role="region"` and focusable so keyboard users can scroll long or wide code. Its name is the filename or "Code"; localise `label` when you pass your own.
- Copy results are announced through the CopyButton live region ("Code copied to clipboard").
- Colours are supplementary: every token is still readable text. Keep the theme mapping at AA contrast.

## RTL & i18n

- Code is always `dir="ltr"`, inside Arabic pages too; the block never mirrors. Its outer margins and layout still follow the page.
- Built-in strings: "Copy code" / "نسخ الشيفرة", "Code" / "شيفرة برمجية", "Code copied to clipboard" / "تم نسخ الشيفرة إلى الحافظة".
- Line numbers are Latin digits.
- `InlineCode` is an LTR isolate so it keeps its character order inside an Arabic sentence.

## Styling & tokens

- Surface: `bg-nq-surface-soft`, `border-border`, `rounded-surface`. Highlighted lines use `bg-nq-selected` and an `border-nq-accent` edge.
- Token colours are Shiki variables set on the figure: `--shiki-token-keyword` → `--nq-accent-text`, `string` → `--nq-success-text`, `constant` → `--nq-warning-text`, `function` → `--nq-info-text`, `comment` and `punctuation` → `--nq-fg-muted`. Override them from a parent with `[--shiki-token-keyword:var(--nq-brand)]`.
- State attributes: `data-highlighted` on the figure once Shiki has loaded; `data-highlighted` on a line that is emphasised; `data-line="n"` on each line.

## Do / Don't

- **Do** give a `filename` when the snippet belongs to a file.
- **Do** cap the height with `preClassName` for long output.
- **Don't** put prose inside a CodeBlock.
- **Don't** override colours with raw hex.

## Related

- [CopyButton](https://docs.nasaqui.com/components/copy-button) · [Markdown](https://docs.nasaqui.com/components/markdown) · [Text](https://docs.nasaqui.com/components/text)

## Lab

https://docs.nasaqui.com/?path=/docs/components-developer-tools-code-block--docs

## Code

### React

```tsx
import { CodeBlock } from "@fadymondy/nasaq/web";

export function Example() {
  return  \`Hello, \${name}\`;`} />;
}
```

### shadcn

```tsx
import { CodeBlock } from "@/components/ui/code-block";

export function Example() {
  return  \`Hello, \${name}\`;`} />;
}
```

### Vue

```vue



```

### Blade

```blade
@php
    $source = 'export const greet = (name: string) => `Hello, ${name}`;'."\n".'// highlighted line'."\n".'greet("Nasaq");';
@endphp


Run pnpm add @fadymondy/nasaq first.




    
    Use pnpm



{{-- code-block-ai --}}
@php
    $greet = "export const greet = (name: string) => `Hello, \${name}`;\n";
@endphp

```

### HTML + Alpine

````html


            

            greet.ts
                            
    
    

                    

        
export const greet = (name: string) => `Hello, ${name}`;// highlighted linegreet("Nasaq");




Run pnpm add @fadymondy/nasaq
 first.



    

            

            install.sh
                            
    
    

                    

        
npm i nasaq



    






            

            greet.ts
                            
    
    

        

    
                    

        
export const greet = (name: string) => `Hello, ${name}`;



````