Code Block
Code block with syntax highlighting, a copy button, and collapsible long snippets with configurable expanded height limits.
import { CodeBlock } from "@plexui/vue/components/CodeBlock";Examples
Overview
Collapsible
Expanded by default
Custom collapsed height
Max expanded height
Without copy button
Supported languages
API
CodeBlock
| Prop | Type | Default | Description |
|---|---|---|---|
default slot | string | — | Code content (text only; interpolate a string to keep its whitespace) |
code | string | — | Code content, used when the default slot is empty |
language | string | — | Prism language name |
class | string | — | Additional wrapper class |
CollapsibleCodeBlock
| Prop | Type | Default | Description |
|---|---|---|---|
default slot / code | string | — | Code content |
language | string | — | Prism language name |
default-expanded | boolean | false | Start expanded |
collapsed-height | number | 140 | Height when collapsed (px) |
max-expanded-height | number | — | Max height when expanded (px); taller code scrolls |
copyable | boolean | true | Show copy button |
class | string | — | Additional wrapper class |
Composition
CodeBlockBase (the container), CodeBlockBaseCode (the highlighted <pre>, with code, language and code-tag-props for the <code> element) and CodeBlockBaseCopyButton (copy-value, loading, disabled) build custom blocks. They are React's CodeBlockBase, CodeBlockBase.Code and CodeBlockBase.CopyButton as flat exports.
Styling
Code Block reads these component tokens. Override them at any scope to restyle it:
--codeblock-background-color: background color (defaultlight-dark(#f9f9f9, #161616))--codeblock-syntax-1: syntax 1 (defaultlight-dark(#c0660d, var(--yellow-100)))--codeblock-syntax-2: syntax 2 (defaultlight-dark(var(--blue-500), var(--blue-200)))--codeblock-syntax-3: syntax 3 (defaultlight-dark(var(--green-600), var(--green-300)))--codeblock-syntax-4: syntax 4 (defaultvar(--pink-500))--codeblock-syntax-5: syntax 5 (defaultlight-dark(var(--purple-500), var(--purple-300)))