CodeSnippet

Use the CodeSnippet to display a code block in a read-only context. By default, the code is formatted but not highlighted.

OverviewProperties

Import

import { CodeSnippet } from '@dynatrace/strato-components/content';

Demo

Change language

The CodeSnippet component offers syntax highlighting for different languages. To change the language, set the language property.

Hide line numbers

To disable the line numbers, you can use the boolean prop showLineNumbers.

Limit snippet height

Use the prop maxHeight to enable scrolling for long code blocks. The maximum height is given in pixels.

Expand to full height

Use the fullHeight prop when the CodeSnippet should expand to fill its parent container. Place it inside a container with a defined height and the component will grow to match that height.

React to copying

The onCopy callback allows you to react to the user copying the code snippet using the copy button.

Wrap long lines

Set the lineBreaks prop to automatically wrap lines that exceed the available width. This is especially useful for log output or other content with long lines.

Add new lines

You can add new lines in the following ways:

• Plain string: Add \n
• String concatenation: Add '\n'
• Template strings: Preserves any whitespace
• JSX expression: One of the expressions can be '\n'

Change size

The CodeSnippet component offers a size prop with default and condensed options. The condensed option enables a more compact code display by optimizing space, while the prop defaults to default for a regular view.