CodeSnippet
Use the CodeSnippet
to display a code block in a read-only context. By
default, the code is formatted but not highlighted.
Import
import { CodeSnippet } from '@dynatrace/strato-components-preview/content';
Use cases
Change the 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 the snippet height
Use the prop maxHeight
to enable scrolling for long code blocks. The maximum
height is given in pixels.
React to copying
The onCopy
callback allows you to react to the user copying the code snippet
using the copy button.
Add linebreaks
You can add linebreaks in the following ways:
- Plain string: Add
\n
- String concationation: Add
'\n'
- Template strings: Preserves any whitespace
- JSX expression: One of the expressions can be
'\n'
Change the 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.