Code

A code component.

Component Source llms.txt

Basic

Installation

jsrepo add ui/code

Configuring Languages

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

Copy Button

No Line Numbers

Variants

Highlight Lines

Overflow

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 -