Code block

You can add code blocks with line numbers and a title using Markdown syntax like this:

```js showLineNumbers title="Code block title"
const x = "Hello world"
```

You can also use the React component if you prefer:

<CodeBlock language="js" title="Code block title" showLineNumbers>
    {`const x = "Hello world"`}
</CodeBlock>

Here's how a code block without a title looks like:

const x = "Code block without a title"

Code highlighting

Prose UI code blocks are highlighted server-side using Shiki. Check out the list of languages supported by Shiki.

Since code highlighting happens server-side (the CodeBlock is a server component), all languages supported by Shiki are built-in. You don't need to configure them separately.

Customizing highlighter theme colors

To customize the highlighter theme colors we recommend that you override the following css variables:

CSS Variable
`--p-color-syntax-syntax1`
`--p-color-syntax-syntax2`
`--p-color-syntax-syntax3`
`--p-color-syntax-syntax4`

Fine-tuning code highlighting

If you'd like more granular control, you can modify syntax token colors for the code block component. Below are all the available CSS variables and their default values:

Variable	Default value
`--p-code-block-color-text`	`hsl(var(--p-color-text))`
`--p-code-block-color-constant`	`hsl(var(--p-color-syntax-syntax1))`
`--p-code-block-color-string`	`hsl(var(--p-color-syntax-syntax2))`
`--p-code-block-color-comment`	`hsl(var(--p-color-text-low))`
`--p-code-block-color-keyword`	`hsl(var(--p-color-syntax-syntax3))`
`--p-code-block-color-parameter`	`hsl(var(--p-color-text))`
`--p-code-block-color-function`	`hsl(var(--p-color-syntax-syntax4))`
`--p-code-block-color-string-expression`	`hsl(var(--p-color-syntax-syntax2))`
`--p-code-block-color-punctuation`	`hsl(var(--p-color-text))`
`--p-code-block-color-link`	`hsl(var(--p-color-syntax-syntax2))`

To learn more about Prose UI design system and CSS variables check out the styling page.