AiCodeBlock

An intelligent code snippet component supporting syntax highlighting, clipboard integration, line numbers, and interactive expansions.

Basic Usage

Display code snippets with filename labels and a one-click copy feature.

main.ts

function greeting() {
  console.log('Hello World!');
}

Basic Usage

Line Numbers & Highlighting

Enable line numbers with show-line-numbers and highlight specific lines using highlight-lines for better explanations.

advanced.ts

1234

function sum(a, b) {
  // These lines will be highlighted
  return a + b;
}

Line Numbers & Highlighting

Interaction & Collapsible

Supports collapsible states (collapsible) and a built-in run action (show-run).

collapsible.json

{ "name": "yh-ui", "version": "1.0.0", "description": "Highly extensible AI UI library" }

script.js

console.log('Running AI simulation...');

Interaction & Collapsible

Edit Function

Supports clicking the "Edit" button to open Monaco editor for code modification.

script.ts

function greet(name: string): string {
  return `Hello, ${name}!`;
}
 
console.log(greet('YH-UI'));

Edit Function

API

Props

Prop Name	Description	Type	Default
code	Code content string	string	''
filename	in header	string Filename to display	''
language	Programming language identifier	string	'text'
show-line-numbers	Whether to show line numbers	boolean	false
highlight-lines	List of line numbers to highlight	number[]	[]
collapsible	Enable collapsible feature	boolean	false
default-collapsed	Initial collapsed state	boolean	false
show-run	Whether to show the run button	boolean	false
show-edit	Whether to show the edit button	boolean	false
editable	Whether the code is editable	boolean	false
highlight	Enable syntax highlighting	boolean	true
theme-overrides	Component-level theme overrides	ComponentThemeVars	—

Events

Event Name	Description	Callback Parameters
copy	Triggered when code is copied	(code: string) => void
run	Triggered when the run button is clicked	(code: string) => void
edit	Triggered when the edit button is clicked	(code: string) => void
update	Triggered when code is saved	(code: string) => void

Slots

Slot Name	Description
default	Custom internal content
actions	Inject custom interactive buttons in the toolbar

Use in Nuxt

Functions smoothly within Vue SSR and Nuxt Server-Side environments combining highlight.js natively. Please inspect Nuxt Usage to unleash seamless isomorphic builds.

SSR Notes:

• ✅ Pure static strings generation safely rendered
• ✅ Smooth hydration processes upon browser loads

SSR Safety

AiCodeBlock securely resolves AST structures inside virtual trees safely.

Theme Variables

Variable Name	Description	Default Value
--yh-ai-code-block-bg	Code area background color	#282c34
--yh-ai-code-block-header-bg	Header toolbar background color	#21252b
--yh-ai-code-block-border-color	Border color	#181a1f
--yh-ai-code-block-color	Code text color	#abb2bf
--yh-ai-code-block-lang-color	Language label text color	#828997
--yh-ai-code-block-border-radius	Code block border radius	8px
--yh-ai-code-block-shadow	Code block shadow	0 4px 12px rgba(0, 0, 0, 0.15)