代码编辑器 ​

@dou-ui/code 提供代码编辑器 DouCodeEditor，用于编辑配置、脚本、练习题这类代码。只展示代码时，使用 CodeBlock 代码块。

安装 ​

代码编辑器是单独的包，需要和 dou-ui 一起安装：

bun add dou-ui @dou-ui/code

引入样式，再注册组件：

import 'dou-ui/style.css'
import '@dou-ui/code/style.css'
import { DouCodeEditor } from '@dou-ui/code'

app.use(DouCodeEditor)

基础用法 ​

使用 v-model 绑定代码字符串，language 设置语言。

编辑器的高度随内容增长。内容较多时，用 CSS 给编辑器设置 height 或 max-height，超出的部分在编辑器内滚动。

字符串里的 \r\n 和 \r 都按换行读入，v-model 交回的字符串统一使用 \n。

编辑辅助 ​

设置 language 后，编辑器会：

• 按 Enter 时保留缩进，在左括号或 HTML 开始标签之后多缩进一级。
• 输入左括号或引号时补上另一半，有选区时用它们包住选区。
• 标出光标旁的括号和与它配对的括号，找不到配对时标为红色。
• 按 Mod + / 注释或取消注释所在的行。

Mod 在 Apple 设备上是 ⌘，在其他系统上是 Ctrl。

closeBrackets 设为 false 关闭括号补全，matchBrackets 设为 false 关闭括号配对标记。

只读与禁用 ​

readonly 让编辑器只能选择和复制，disabled 让编辑器不能获得焦点。placeholder 设置内容为空时的提示文字。

外观 ​

lineNumbers 控制是否显示行号，activeLine 控制是否给光标所在行加底色。tabSize 设置制表位宽度，也是一级缩进的宽度；indentWithTabs 设为 true 时用制表符缩进。

字号、行高、背景色等通过 CSS 变量调整，见下方 CSS 变量。行高请使用整数像素。

在其他组件中使用 ​

以下生态包提供了基于代码编辑器的版本，都在各自的 code 子路径中：

完整的页面示例见区块代码练习和配置编辑。

API ​

CodeEditor Props ​

CodeEditor Events ​

CodeEditor Exposes ​

CSS 变量 ​

浮在页面上的补全列表、说明和提示会带上编辑器上的字号、背景色、选区颜色和问题颜色（--dou-code-editor-error、--dou-code-editor-warning、--dou-code-editor-info），在编辑器上设置即可。

语法颜色见语言 · 颜色。