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%.