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