525

Code

A code component.

Installation

Usage

Composition

Use the following composition to build a Code block:

Configuring Languages

The highlighter and languages can be configured from shiki.ts.

Copy Button

No Line Numbers

Variants

Highlight Lines

Overflow

Code Block

API Reference

Code.

Root

The root code block component for syntax highlighting.

PropTypeDefault
ref? $bindable
HTMLDivElement null
children?
Snippet -
variant?
enum default
lang?
enum typescript
code
string -
class?
string -
hideLines?
boolean false
highlight?
number | [number, number][] []
Code.

CopyButton

A button to copy the code block content.

PropTypeDefault
ref? $bindable
HTMLButtonElement null
variant?
enum ghost
size?
enum icon
icon?
Snippet -
animationDuration?
number -
onCopy?
function -
children?
Snippet -
Code.

Overflow

A component to handle overflow of the code block.

PropTypeDefault
collapsed? $bindable
boolean true
children?
Snippet -