Skip to main content

    CodeEditor

    The CodeEditor provides a text input field that is specifically designed for editing code. It further offers properties to configure e.g. syntax highlighting, spell checks or line wrapping. Once the editor is focused via the keyboard, the user must press "Enter" to start editing and "Escape" to quit editing and return to the keyboard navigation flow.

    OverviewProperties

    Import​

    import { CodeEditor } from '@dynatrace/strato-components-preview/editors';

    Use cases​

    CodeSandbox

    Set a language​

    To enable syntax highlighting, specify the desired language with the language property.

    CodeSandbox

    Disable editing​

    To disable editing of the content, use the readOnly property.

    CodeSandbox

    Enable line wrap​

    To enable line wrap as soon as the content overflows, use the lineWrap property.

    CodeSandbox

    Expand editor to full height​

    To expand the CodeEditor to the full available height of its parent, use the fullHeight property. If you want the CodeEditor to respect the min-height and max-height of the parent, use a flex container.

    CodeSandbox

    Default folding in editor​

    To provide default folding at specific character positions in the CodeEditor, use the defaultFolding property that accepts an array of positions.

    CodeSandbox

    Change the size​

    The CodeEditor 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