AiCodeBlock 智能代码块

支持代码高亮、自动复制、行号显示及交互扩展的智能代码展示组件。

基础用法

提供了代码的文件名信息以及一键复制功能。

main.ts

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

基础用法

行号与高亮

通过 show-line-numbers 开启行号，highlight-lines 传入数组实现特定行高亮，常用于代码讲解。

advanced.ts

1234

function sum(a, b) {
  // 这两行将被高亮
  return a + b;
}

行号与高亮

交互与折叠

支持可折叠状态 (collapsible) 以及内置的运行按钮 (show-run)。

collapsible.json

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

script.js

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

交互与折叠

API

Props

属性名	说明	类型	默认值
code	代码内容字符串	string	''
filename	代码头部文件名表示	string	''
language	语言标识	string	'text'
show-line-numbers	是否显示行号	boolean	false
highlight-lines	需要高亮的行号列表	number[]	[]
collapsible	是否开启折叠功能	boolean	false
default-collapsed	默认是否折叠	boolean	false
show-run	是否显示运行按钮	boolean	false
highlight	是否开启语法高亮	boolean	true
theme-overrides	组件级别的主题定制覆盖变量	ComponentThemeVars	—

Events

事件名	说明	回调参数
copy	复制代码时触发	(code: string) => void
run	点击运行按钮时触发	(code: string) => void

Slots

插槽名	说明
default	自定义内部展现内容
actions	在工具栏右侧自定义添加操作按钮区域

在 Nuxt 中使用

能够在 Nuxt 以及服务端同构渲染中保持与 highlight.js 计算高亮样式的兼容合并，提供顺畅的一键复制体验并开箱即用地支持 Vite 热更新词法高亮。详见 Nuxt 集成文档。

SSR 注意事项：

• ✅ highlighter 纯净提取支持
• ✅ v-html 挂载无闪烁 (No hydration mismatches)

SSR 安全性

AiCodeBlock 首屏骨架在同构环境中无忧渲染。

主题变量

变量名	说明	默认值
--yh-ai-code-block-bg	代码区域背景色	#282c34
--yh-ai-code-block-header-bg	顶部工具栏背景色	#21252b
--yh-ai-code-block-border-color	边框颜色	#181a1f
--yh-ai-code-block-color	代码文字颜色	#abb2bf
--yh-ai-code-block-lang-color	语言标识文字颜色	#828997
--yh-ai-code-block-border-radius	代码块圆角大小	8px
--yh-ai-code-block-shadow	代码块阴影	0 4px 12px rgba(0, 0, 0, 0.15)