logo

Loading...

Codeblocks

A comprehensive demonstration of the code block component capabilities.

Themeing

The code block component supports custom theming via CSS variables. Below is an example of a VSCode-like theme definition that can be applied. 

{
  "--bg": "#1e1e1e",
  "--primary": "#252526",
  "--header-bg": "#252526",
  "--border": "#333333",
  "--text": "#d4d4d4",
  "--line-number": "#858585",
  "--tag": "#569cd6",
  "--attr": "#9cdcfe",
  "--string": "#ce9178",
  "--punct": "#808080",
  "--keyword": "#c586c0",
  "--function": "#dcdcaa",
  "--comment": "#6a9955",
  "--number": "#b5cea8",
  "--operator": "#d4d4d4",
  "--button-bg": "#2d2d2d",
  "--button-text": "#cccccc",
  "--button-primary-bg": "#007acc",
  "--button-primary-text": "#ffffff",
  "--status-bar-bg": "#007acc",
  "--error-color": "#f14c4c",
  "--error-bg": "rgba(241, 76, 76, 0.1)",
  "--error-text": "#cccccc",
  "--scroll-track": "#1e1e1e",
  "--scroll-thumb": "#424242",
  "--fade-start": "rgba(30, 30, 30, 0)",
  "--fade-end": "#1e1e1e",
  "--terminal-rgb-bg": "30, 30, 30",
  "--terminal-bg": "#1e1e1e",
  "--terminal-text": "#d4d4d4",
  "--terminal-green": "#6A9955",
  "--terminal-red": "#F44747",
  "--terminal-yellow": "#FFAF00",
  "--terminal-blue": "#569CD6",
  "--terminal-cyan": "#4EC9B0",
  "--terminal-magenta": "#C586C0",
  "--terminal-white": "#d4d4d4",
  "--terminal-black": "#1e1e1e"
}
VSCode Example Theme
function hello() { return "World"; }
x = undefined;
Error: Variable not found
Warning: Check your variable usage

1. Minimal Configuration

Line numbers disabled, copy button hidden, status bar hidden.

txt
This is a simple text code block without any extra elements.

2. Language Highlighting

JavaScript

javascript
1
console.log('This is a large code block test.');
2
function helloWorld() {
3
console.log('Hello, World!');
4
// Perform some basic operations
5
let sum = 0;
6
for(let i = 0; i < 10; i++) {
7
sum += i;
8
}
9
console.log('Sum from 0 to 9:', sum);
10
 
11
const arr = ['apple', 'banana', 'cherry'];
12
const upperArr = arr.map(item => item.toUpperCase());
13
console.log('Uppercase array:', upperArr);
14
 
15
if(sum > 20) {
16
return 'Sum is greater than 20.';
17
} else {
18
return 'Sum is 20 or less.';
19
}
20
}
Read Only
No Issues
UTF-8

Vue

vue
1
<template>
2
<div>
3
<h1>{{ message }}</h1>
4
</div>
5
<ComponentExample
6
prop-string="Example String"
7
:prop-number="42"
8
/>
9
<!-- v-if example -->
10
<div v-if="fields.basicInput">
11
<p>Values: {{ fields.basicInput }}</p>
12
</div>
13
</template>
Read Only
No Issues
UTF-8

3. Validation & Error Handling

The component automatically detects syntax errors for JSON and XML-like languages. Notice the red lines and the "Problems" indicator in the status bar.

Broken JSON (Syntax Error)

json
1
{
2
"name": "John Doe",
3
"age": 30,
4
"missingQuote: "New York",
Expected ':' after property name in JSON at line 4, column 21 (line 4 column 21)
5
"trailingComma": true,
6
}
Read Only
1
UTF-8

Broken XML (Tag Mismatch)

xml
1
<root>
Tag <root> is never closed.
2
<child>
3
<subchild>Content</child>
Tag mismatch: Expected </subchild> but found </child>.
(Related) <subchild> was opened here.
4
</child>
5
<unclosed>
(Related) <unclosed> was opened here.
6
</root>
Tag mismatch: Expected </unclosed> but found </root>.
Unclosed tag <root>. It was defined at line 1.
Read Only
6
UTF-8

4. Custom Sections

Inject arbitrary content between lines using the sections prop and slot. Useful for Git blame, inline warnings, or AI suggestions.

javascript
1
function legacyFunction() {
Alice committed 2024-06-01a1b2c
2
// This function is old
⚠️ Deprecation Warning: This function will be removed in v2.0
3
return true;
4
}
5
 
6
function newFunction() {
7
return false;
return calculateFibonacci(n - 1) + calculateFibonacci(n - 2);
Copilot
8
}
Read Only
No Issues
UTF-8

5. Line Truncation

Forcing a maximum of 5 lines for long content.

javascript
1
console.log('This is a large code block test.');
2
function helloWorld() {
3
console.log('Hello, World!');
4
// Perform some basic operations
5
let sum = 0;
Read Only
No Issues
UTF-8

6. Editable Mode

Use v-model and editable to turn it into an editor.

Live Editor|script.js
1
function legacyFunction() {
2
// This function is old
3
return true;
4
}
5
 
6
function newFunction() {
7
return false;
8
}
Ln 1, Col 1
No Issues
UTF-8javascript

Live Preview of Model:

function legacyFunction() {
    // This function is old
    return true;
}

function newFunction() {
    return false;
}
Live Editor|script.js
1
function legacyFunction() {
2
// This function is old
3
return true;
4
}
5
 
6
function newFunction() {
7
return false;
8
}
Read Only
No Issues
UTF-8javascript

7. Within Frame Component

plaintext
This is generic content inside the frame, but usually you'd put the UICodeBlock here if you needed custom framing logic.