Skip to main content

CodeSnippet

  • Changelog

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

Package @dynatrace/strato-components, latest version 3.15.1. Below are the changes to CodeSnippet. See Components changelog for all changes to the package.

3.15.0 Released Oct 1, 2026​

Deprecations​

  • showCopyAction and onCopy will be removed and replaced by CodeSnippet.ActionsMenu with CodeSnippet.Copy, which takes the onCopy prop. (APPDEV-19581)
How to migrate

Replace onCopy with the onCopy prop on CodeSnippet.Copy:

<CodeSnippet>
{snippet}
<CodeSnippet.ActionsMenu>
<CodeSnippet.Copy onCopy={trackCopy} />
</CodeSnippet.ActionsMenu>
</CodeSnippet>

To hide the "Copy" button for now, until the next major release with the breaking change, replace showCopyAction={false} or allowCopy={false} with an empty CodeSnippet.ActionsMenu. Omitting CodeSnippet.Copy renders no action UI at all:

<CodeSnippet>
{snippet}
<CodeSnippet.ActionsMenu />
</CodeSnippet>

In the meantime: showCopyAction/allowCopy still control the plain, single-button copy path. Once the "Copy" button becomes opt-in only in the next major release, a plain CodeSnippet with no CodeSnippet.ActionsMenu won't show the button by default, and the empty CodeSnippet.ActionsMenu above can be removed.

Updates​

  • You can now add CodeSnippet.Copy and/or CodeSnippet.Download actions via the new CodeSnippet.ActionsMenu slot. (APPDEV-19581)
How to opt in

Render CodeSnippet.ActionsMenu with CodeSnippet.Copy and/or CodeSnippet.Download as children. One renders as a single button, while both together escalate to a kebab menu. The downloaded file's extension is derived from language, and its name defaults to code-snippet.<extension>, overridable via fileName.

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

<CodeSnippet language="python">
{pythonScript}
<CodeSnippet.ActionsMenu>
<CodeSnippet.Copy />
<CodeSnippet.Download fileName="script.py" />
</CodeSnippet.ActionsMenu>
</CodeSnippet>;

Omitting CodeSnippet.ActionsMenu keeps the existing single "Copy" button unchanged.

3.11.3 Released Aug 20, 2026​

Updates​

  • Fixed a crash when copying code in environments that block clipboard access, such as embedded pages. (APPDEV-19495)
  • Fixed function names with trailing digits being incorrectly highlighted as number literals when rendering DQL syntax. (APPDEV-19541)

3.10.0 Released Jul 28, 2026​

Updates​

  • Fixed the freeze that occurred when syntax highlighting a DQL code snippet containing a triple-quoted string with many escaped quotes. (APPDEV-18665)

3.8.0 Released Jul 1, 2026​

Updates​

  • Introduced a fullHeight prop that allows the component to fill the height of its parent container. (APPDEV-17851)

3.6.0 Released May 29, 2026​

Updates​

  • Null literals are now syntax-highlighted when using the dql language. (APPDEV-17731)
  • With the DQL language, a query between at least two triple-quoted strings in one line is no longer highlighted as a string. (APPDEV-17719)
  • With the DQL language, a single-line comment containing consecutive double-quote characters is now correctly highlighted as a comment to the end of the line. (APPDEV-17719)

3.5.0 Released May 13, 2026​

Updates​

  • Keyword highlighting for DQL language no longer highlights non-keywords, matching the behavior of the DQLEditor. (APPDEV-11154)
  • Syntax highlighting for DQL language no longer highlights the colon of a parameter. (APPDEV-11154)
  • Number literals followed by a duration or calendar duration unit suffix are now highlighted when using the dql language. (APPDEV-17380)
  • Boolean literals are now syntax-highlighted when using the dql language. (APPDEV-17379)
  • Added log-language highlighting support for 16-character hex IDs (letter-leading and digit-leading). (APPDEV-11851)

3.4.0 Released May 5, 2026​

Updates​

  • Kotlin, Swift, and Groovy are now supported languages. (APPDEV-12954)

3.2.0 Released Apr 7, 2026​

Updates​

  • No longer crashes on very large inputs. Syntax highlighting is now limited to the first 100,000 characters; content beyond that is rendered as plain text without syntax highlighting or dynamic line breaks. (APPDEV-16797)
  • Added data-dt-name attribute to the copy button. (APPDEV-16670)
Still have questions?
Find answers in the Dynatrace Community