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
showCopyActionandonCopywill be removed and replaced byCodeSnippet.ActionsMenuwithCodeSnippet.Copy, which takes theonCopyprop. (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.Copyand/orCodeSnippet.Downloadactions via the newCodeSnippet.ActionsMenuslot. (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
fullHeightprop 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
dqllanguage. (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
dqllanguage. (APPDEV-17380) - Boolean literals are now syntax-highlighted when using the
dqllanguage. (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-nameattribute to the copy button. (APPDEV-16670)