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.

    OverviewPropertiesChangelog

    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.

    Enable actions menu​

    Use CodeSnippet.ActionsMenu as a child to replace the default "Copy" button with CodeSnippet.Copy, CodeSnippet.Download, or both. CodeSnippet.ActionsMenu is an empty wrapper. Use a single child for a single button matching that action. Configure both children to combine them into a menu instead.

    Caution

    allowCopy, showCopyAction and the top-level onCopy prop are deprecated and will be removed in a future major version, when the copy action becomes opt-in only through CodeSnippet.ActionsMenu with CodeSnippet.Copy. Adopting the new API now avoids a later migration. Until then, use an empty CodeSnippet.ActionsMenu to hide the "Copy" button. Once copy becomes opt-in only, a plain CodeSnippet shows no button by default, and you can remove the empty CodeSnippet.ActionsMenu.

    React to copying​

    Add onCopy to CodeSnippet.Copy to react to the user copying the code snippet. The callback fires whenever the copy action is triggered.

    Add a download action​

    Add CodeSnippet.Download to let users download the snippet as a file.

    The file name defaults to code-snippet.<extension>. Set fileName to override it. If fileName carries no extension of its own, the extension is derived from the language prop, falling back to .txt when language is unset or has no direct file extension. Characters other than letters, digits, -, and _ are stripped from both the name and the extension.

    Set onDownload to react to the download. The callback fires once the file is handed off to the browser, not once the download finishes.

    Combine "Copy" and "Download"​

    Render CodeSnippet.Copy and CodeSnippet.Download together to combine both actions into a single menu.

    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.

    Large inputs

    For very large strings (for example, log files with thousands of lines), syntax highlighting is limited to the first 100,000 characters to prevent browser performance issues. Content beyond this limit is still displayed as plain text with correct line numbers, but dynamic line breaks are disabled.

    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.

    Still have questions?
    Find answers in the Dynatrace Community