Skip to main content

    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-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
    Still have questions?
    Find answers in the Dynatrace Community