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.

Basic Usage

Line Numbers & Highlighting

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

Line Numbers & Highlighting

Interaction & Collapsible

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

Interaction & Collapsible

Edit Function

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

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)