Code

tip

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.

The EuiCode and EuiCodeBlock components support all language syntaxes supported by the prism library. The language prop can also be omitted to simply render formatted but unhighlighted 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".

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.

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

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.

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

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

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`
Prop paddingSize#	Description and type Type: `"s" \| "m" \| "l" \| "none"`	Default value `l`
Prop fontSize#	Description and type Type: `"s" \| "m" \| "l"`	Default value `s`
Prop whiteSpace#	Description and type Specify how `white-space` inside the element is handled. `pre` respects line breaks/white space but doesn't force them to wrap the line `pre-wrap` respects line breaks/white space but does force them to wrap the line when necessary. Type: `"pre" \| "pre-wrap"`	Default value `pre-wrap`
Prop isCopyable#	Description and type Displays an icon button to copy the code snippet to the clipboard. Type: `boolean`	Default value `false`
Prop lineNumbers#	Description and type Displays line numbers. Optionally accepts a configuration object for setting the starting number, visually highlighting ranges, or annotating specific lines: `{ start: 100, highlight: '1, 5-10, 20-30, 40', annotations: { 6: 'A special note about this line' } }` Type: `boolean \| LineNumbersConfig`	Default value `false`
Prop overflowHeight#	Description and type Sets the maximum container height. Accepts a pixel value (`300`) or a percentage (`'100%'`) Ensure the container has calcuable height when using a percentage Type: `string \| number`	Default value
Prop isVirtualized#	Description and type Renders code block lines virtually. Useful for improving load times of large code blocks. When using this configuration, `overflowHeight` is required and `whiteSpace` can only be `pre`. Type: `boolean`	Default value