Code

The Code component provides a semantic way to display inline code snippets or technical text using monospace font. It enhances readability and visual distinction of code-related content.

Semantic HTML code element

Customizable text color

Supports text truncation for long texts

Architecture

so-code

Slot: default

Reference

Code
The component renders a semantic HTML code element with configurable styling options. It provides proper monospace formatting.
- Attributes
  - color
    enum
    / default: brand
    Sets the color variant of the code text. Use brand for primary content, neutral for standard text and semantic colors (success, warning, critical) to indicate different states or importance levels.
  - id
    string
    / default: -
    A unique identifier for the code element. This can be used for targeting the element with custom styling or scripting.
  - truncate
    boolean
    / default: false
    When set to true, the text content will be truncated to a single line with an ellipsis if it exceeds the container width. Alternatively, you can specify a number to limit the visible lines before truncation occurs.

Code

Architecture

Reference

Code

Attributes