---
title: 'CodeBlock'
description: 'CodeBlock is a code highlighting component that uses prism for code and syntax highlighting.'
github: 'https://github.com/blockstack/ux/tree/master/packages/ui/src/codeblock'
---

# CodeBlock

CodeBlock is a code highlighting component that uses prism for code and syntax highlighting.
`CodeBlock` extends the `Highlighter` primitive component. This is the component that is used
within these docs to display static and editable code.

## Import

```tsx live=false
import { CodeBlock } from '@blockstack/ui';
```

## Usage

```jsx
<CodeBlock
  code={`(define-map store ((key principal))
  ((v1 int)
   (v2 int))
)

(define-public (get-value (key principal))
    (match (map-get? store {key: key})
        entry (ok (get v2 entry))
        (err 0)))

(define-public (set-value (key principal))
    (begin
        (map-set store {key: tx-sender} {v1: 100, v2: 7})
        (ok true)))`}
  language="clarity"
  showLineNumbers
/>
```

### Props

`CodeBlock` extends the props of our `Highlighter` component, and `Box` component.

| Name              | Type       | Default   | Description                                                                                                                                    |
| ----------------- | ---------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `code`            | `string`   |           | The source code you want to highlight.                                                                                                         |
| `language`        | `Language` | `clarity` | The language of the source code. [See type definition.](https://github.com/blockstack/ux/blob/master/packages/ui/src/highlighter/types.ts#L56) |
| `showLineNumbers` | `boolean`  |           | If `true`, line numbers will be displayed to the left of the source code.                                                                      |
