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

CodeSandbox

Change the language

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

CodeSandbox

Hide line numbers

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

CodeSandbox

Limit the snippet height

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

CodeSandbox

React to copying

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

CodeSandbox

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'

CodeSandbox

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.

CodeSandbox

Props

CodeSnippetProps

extends, , ,

Name	Type	Default	Description
language?		-	Code language to be used to run highlighting on the given code.
allowCopy?		true	Whether the copy button should be displayed.
showLineNumbers?		true	Whether line numbers should be shown.
maxHeight?		-	Height of the code container. If this is known in advance, then very long code snippets will still be able to fit into the container while also having scrolling enabled. Value is given in px.
lineBreaks?		false	Whether the content breaks into new lines automatically or not.
onCopy?	() =>	-	Callback fired when copy button is clicked and the code snippet was copied.
size?	|	is 'default'.	CodeSnippet layout size, 'default' for standard spacing and 'condensed' for reduced font size, padding and margins.