Code

The EuiCode and EuiCodeBlock components support all language syntaxes available through the prismjs library and ES|QL syntax provided by prismjs-esql plugin. The language prop can also be omitted to simply render formatted but non-highlighted code.

JSX code (often React) has distinct language syntaxes from the base JavaScript and TypeScript languages. For these instances, use language="jsx" or language="tsx".

Components

EuiCode and EuiCodeBlock are intended to render static lines or blocks of code in read-only contexts. If you need capabilities to edit, or want to print long code (e.g., printing JSON from an API), we recommend installing a version of Monaco. If you are building within the Kibana platform, you can use their

CodeEditor.

Inline

EuiCode is for making inline code snippets that can work within or next to bodies of text.

Code block

EuiCodeBlock can be used to create multi-line code blocks with configurable font and padding sizes.

Usage

Copying

Adding the isCopyable prop allows users to copy the text content of the code block.

Scrolling

For long content, you can set an overflowHeight which will scroll if the text exceeds that height, and allows users to view the code in fullscreen mode.

Wrapping

By default, the whiteSpace property is set to pre-wrap. This makes the text wrap when needed. You can, however, pass pre to the whiteSpace prop and the text won't wrap unless line breaks are in the content.

Line numbers

To render line numbers, you can add lineNumbers as boolean flag.

You can customize line number display further with a configuration object containing the following optional settings:

start: Changes the starting number of the first line. Defaults to 1.
highlight: Visually highlights certain lines (e.g. "3), or ranges of lines (e.g. "5-10"). Accepts a comma-separated string of lines or line ranges.
annotations: Displays an informational icon next to certain line numbers, that provides more context via a popover. Pass an object of line numbers with corresponding annotations (accepts strings or React nodes).

Code block virtualization

For large blocks of code, add isVirtualized to reduce the number of rendered rows and improve load times. Note that when using virtualization:

overflowHeight is required
whiteSpace is enforced as pre, and cannot be set to pre-wrap

Fill vertical space

In places like flyouts, you can use overflowHeight="100%" to stretch the code block to fill the space. Just be sure that it's parent container is also height: 100%.

Props

EuiCode

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop language#	Description and type Sets the syntax highlighting for a specific language @see https://prismjs.com/#supported-languages for options Type: `string`	Default value
Prop transparentBackground#	Description and type Type: `boolean`	Default value `false`

EuiCodeBlock