CodeSnippet

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

Overview Properties Changelog

CodeSnippetProps

Signature:

export declare type CodeSnippetProps =  &  &  &  &  &  &  & {
    /**
     * Code language to be used to run highlighting on the given code.
     */
    language?: ;
    /**
     * Whether the copy button should be displayed.
     * @defaultValue true
     * @deprecated Will be removed. Use `CodeSnippet.ActionsMenu` with `CodeSnippet.Copy` instead.
     */
    allowCopy?: ;
    /**
     * Whether the copy button should be displayed.
     * @defaultValue true
     * @deprecated Will be removed. Use `CodeSnippet.ActionsMenu` with `CodeSnippet.Copy` instead.
     */
    showCopyAction?: ;
    /**
     * Whether line s should be shown.
     * @defaultValue true
     */
    showLineNumbers?: ;
    /**
     * Whether the content breaks into new lines automatically or not.
     * @defaultValue false
     */
    lineBreaks?: ;
    /**
     * Callback fired when copy button is clicked and the code snippet was copied.
     * @deprecated Will be removed. Use the `onCopy` prop of `CodeSnippet.Copy` instead.
     */
    onCopy?: () => ;
    /**
     * CodeSnippet layout size,  for standard spacing and  for reduced font size, padding and margins.
     * @defaultValue 
     */
    size?:  | ;
    /**
     * Called when the component receives focus.
     */
    onFocus?: (e: <>) => ;
    /**
     * Called when the component loses focus.
     */
    onBlur?: (e: <>) => ;
    /**
     * Handler that is called when the element's focus status changes.
     * @deprecated Use onFocus/onBlur instead.
     */
    onFocusChange?: (isFocused: ) => ;
};

CodeSnippet.ActionsMenu

The CodeSnippet.ActionsMenu slot component takes no props of its own. Render it as a child of CodeSnippet with CodeSnippet.Copy, CodeSnippet.Download, or both in a menu.

CodeSnippet.Copy

CodeSnippet slot definition for the "Copy" action.

CodeSnippetCopyProps

Name	Type	Default	Description
`onCopy?`	() =>		Callback fired when the copy action is triggered.

CodeSnippet.Download

CodeSnippet slot definition for the "Download" action.

CodeSnippetDownloadProps

Name	Type	Default	Description
`fileName?`		`'code-snippet.\<derived extension\>'`	Name of the downloaded file. If no extension is provided, it is derived from the `language` prop. Both the filename and extension are sanitized to keep only letters, digits, `-`, and `_`.
`onDownload?`	() =>		Callback fired when the download action is triggered.

Still have questions?

Find answers in the Dynatrace Community