# @ape-egg/codie 中文文档

规范地址：https://npmcn.com/package/%40ape-egg/codie/

版本：0\.2\.4
npm 元数据更新时间：2026-11-01T14:29:46.685Z
中文译文更新时间：2026-11-06T16:49:33.536Z
软件包许可：ISC

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ape-egg/codie
原文对照：https://npmcn.com/package/%40ape-egg/codie/?lang=original
项目主页：https://github.com/kkortes/ape-egg#readme
源码仓库：https://github.com/kkortes/ape-egg

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：83.1 kB，20 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2026-03-04T20:23:55.495Z
- 最新版本发布：2026-11-01T14:29:46.397Z
- 近 30 天下载量：2704（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 23 个）

## 中文简介

模块代码显示和编辑包

## 安装

```sh
npm install @ape-egg/codie
```

也可以使用：`pnpm add @ape-egg/codie`、`yarn add @ape-egg/codie`、`bun add @ape-egg/codie`

## README

# 科迪语Name

用于网络的模块代码显示和编辑包.

## 概览

**科迪语Name** 是一个轻量级,模块化的代码亮点和编辑器,可以弥合静态代码显示和全浏览器IDE之间的空白. 由香草JavaScript所建,提供语法突出化,活版编辑,与Vibe等反应性框架无缝融合.

**愿景:** Codie是一个从静态显示器到全浏览器 IDE 的光谱:

```
Minimal (vanilla)     →     Editor     →     Full REPL (vibe-powered)
highlight + format    +editable             +live output, inspect,
                      +numberedRows          visual editing, zero-build HMR
```

## 特征

### 核心特征

-   **语法突出显示**: HTML, CSS, JavaScript, JSON, shell and Python 从代码本身检测出; YAML ()`yaml`编号 :`yml`)和马克当 (`markdown`编号 :`md`,用自己语言画出栅栏的块来命名). 任何其他语言绘制为隐藏的纯文本
-   **可编辑模式**: 将静态代码转换成有文本区域覆盖的活编辑器
-   **行号**: 代码参考的可选编号行
-   **Diff 模式**: 在文本对接代码前除去一个文本, 绘制出相同的亮点
-   **它的自有元素**数字 : `<codie>` 是块; `<template codie>` 持有 HTML 浏览器不能解析
-   **语言模式**:通过属性平线语言(`highlight-html`, (中文(简体) ), `highlight-css`, (中文(简体) ), `highlight-js`, (中文(简体) ), `highlight-json`(中文(简体) )
-   **暗/亮主题**: 切换为 `[dark]` 属性
-   **运行时状态切换**: 动态地通过 `codieRef.editable`, (中文(简体) ), `codieRef.numberedRows`

### 编辑特性

-   **标签处理**: 标签键插入2个空格
-   **多行缩进**: 选择多行 + 标签缩进
-   **外部缩进**: Shift+Tab 删除缩进
-   **现场预览**数字 : `onEdit` 每次变换都点燃
-   **处理错误**数字 : `onError` 对执行失败的召回

## 安装

```bash
npm install @ape-egg/codie
```

## 使用量

### 基本语法突出显示

```html
<link rel="stylesheet" href="@ape-egg/codie/codie.css" />
<script type="module">
  import codie from '@ape-egg/codie';

  codie();
</script>

<codie>
  const greet = (name) => `Hello, ${name}!`;
</codie>
```

`codie()` 不需要争辩 `<codie>` 或者说 `[codie]` 图标.

### HTML 语言 在街区内

浏览器在内部解析标记 `<codie>`。将 HTML 放入一个 `<template codie>` 相反,它以文字形式到达codie:

```html
<template codie>
  <div>
    <p>Hello, world!</p>
  </div>
</template>
```

这个 `codie` 属性使任何元素成为codie实例; `<codie>` 没有.

### 有行号的可编辑代码

```js
import codie from '@ape-egg/codie';

const editor = codie('codie');
editor.editable = true;
editor.numberedRows = true;
```

### 用编辑预览

```js
const outputRef = document.querySelector('output');

const editor = codie('codie');
editor.editable = true;
editor.onEdit = ({ formatted, raw }) => {
  outputRef.innerHTML = formatted;
};
```

### Diff 模式

```js
const view = codie({ el, diff: true, before: previous });

view.code = draft; // redraws the diff
view.before = other; // redraws the diff
view.diff = false; // back to a plain view of the same text
view.editable = true; // edit the after text; removed rows hide, added rows follow
```

两种文本都由Codie自己的亮点来整体突出出,再分出一行. 换行会跑,每跑都会在被移除的地块上方被添加. 当至少一半的单词(平分不计数)存活下来时,被删除的一行和被添加的一行作为同一行被编辑成对,只有这样,他们更改的单词才会被标记. 与 `numberedRows` 各行在行号前后随行. 整个Diff让一个去, 像平地的景色.

`diff(before, after, language?, { more }?)` 从 `@ape-egg/codie/diff` 返回行为 HTML,用于实例之外。 鉴于 `more`,在变化折叠成一整行后,超过三行不变 `.codie-diff-fold` 读取行 `... 12 more lines ...` 与 `more` 作为它的话。 这行是 `<details>` 保留它代表的行,所以点击就可以打开,没有脚本.

### 特定语言加亮

```html
<!-- HTML, with its <script>, <style> and on* handlers -->
<template codie highlight-html>...</template>

<!-- CSS: stylesheets or bare declaration lists -->
<codie highlight-css>...</codie>

<!-- JavaScript -->
<codie highlight-js>...</codie>

<!-- JSON -->
<codie highlight-json>...</codie>

<!-- Detected from the code: HTML, CSS, JavaScript, JSON, shell, Python or plain text (default) -->
<codie>...</codie>
```

实例上设置的语言( A)`codieRef.language = 'yaml'`)或转至 `highlight(code, language)` 编号 : `diff(before, after, language)` 可以是其中任何一个 `html`, (中文(简体) ), `css`, (中文(简体) ), `js`, (中文(简体) ), `json`, (中文(简体) ), `python`, (中文(简体) ), `shell`, (中文(简体) ), `yaml`, (中文(简体) ), `yml`, (中文(简体) ), `markdown`, (中文(简体) ), `md` 或者说 `text`。一个语言Codie没有亮点,例如 `toml`,绘制为隐藏的纯文本.

## API 密码

### `codie(selector | element | config)`

初始化 Codie 实例 .

**参数:**

-   `selector` (字符串):查询可口可乐元素的选择器—— `codie` 对于元素, `[codie]` 对应的
-   `element` (要素):DOM元素参考
-   `config` (对象):可选配置对象 `el`, (中文(简体) ), `editable`, (中文(简体) ), `numberedRows`, (中文(简体) ), `foldable`, (中文(简体) ), `diff` 财务报告和审定财务报表 `before` 属性; 无 `el` 元素是第一个 `codie, [codie]` 在文档中

**回返情况:** Codie 实例代理服务器

### 实例属性

```js
const editor = codie('codie');

// Get/set code content
editor.code; // Get current code
editor.code = '<div>New code</div>'; // Set code (updates display + textarea)

// Toggle features
editor.editable = true; // Enable editing
editor.numberedRows = true; // Show line numbers
editor.foldable = false; // Disable code folding (experimental)
editor.diff = true; // Diff `before` against the code
editor.before = 'old code'; // Set the before text (redraws when diffing)

// Callbacks
editor.onEdit = ({ formatted, raw }) => {
  // formatted: cleaned up for display
  // raw: exact code content
};

editor.onError = (error) => {
  // Handle errors during editing
};
```

### 出口公用事业

```js
import {
  highlightHTML,
  highlightJS,
  highlightCSS,
  highlightJSRaw,
  escapeHTML,
  unescapeHTML,
  formatDocument,
  normalizeInlineWhitespace,
  ATTR,
  CLASS,
} from '@ape-egg/codie';
```

## 属性

### 容器属性

A 类 `<codie>` 元素是其标记的示例。 下面的属性 上它,或者任何其他元素 `codie`数字 :

-   `codie` - 标记一个非元素 `<codie>` 作为一个例子, `<template codie>` 最重要的是
-   `dehydrate` - 跳过初始化(用于文档)
-   `highlight-html` - 突出显示为 HTML,包括嵌入式 `<script>`, (中文(简体) ), `<style>` 财务报告和审定财务报表 `on*` 处理者
-   `highlight-css` - 突出为CSS
-   `highlight-js` - 突出显示为 JavaScript
-   `highlight-json` - 突出为JSON
-   以上无一 - 从代码检测语言( HTML, CSS, JavaScript, JSON, shell, Python 或纯文本)
-   `dark` - 应用黑暗主题

### 运行时间属性( Codie 应用)

-   `codie-editable` - 可编辑模式激活时应用
-   `codie-numbered` - 显示行号时应用
-   `codie-foldable` - 启用折叠时应用(实验)
-   `diff` - diff模式打开时应用

## 背景变量

Codie大小本身取自CSS自定义属性设置在母体上,因此它用所包围的任何布局系统来排列. 每个都有一个后退:

-   `--unit` (4px) - 间距单元;行高为6个单元,被垫为4个单元
-   `--font-mono` (Geist Mono 堆栈) - 字体家族

## 建筑

科迪用一个 **分层方法** 与 CSS 网格连接 :

1.  **显示图层** (单位:千美元)`<pre>`) - 语法高亮代码
2.  **文本区域图层** (可选的) - 当 `editable = true`
3.  **行号** (可选) - 当 `numberedRows = true`

所有层都通过反应代用来同步,当属性改变时更新DOM.

## 虚拟集成

Codie自然地和Vibe一起进行活的,被动的代码编辑:

```js
import { init } from '@ape-egg/vibe';
import codie from '@ape-egg/codie';

init({ output: '' });

const editor = codie('template[codie]');
editor.editable = true;
editor.onEdit = ({ formatted }) => {
  $.output = formatted;
};
```

```html
<template codie>
  <p>Edit me!</p>
</template>

<output>@[output]</output>
```

## 路线图

### 已执行

-   语法突出化(HTML、CSS、JS、JSON、shell、Python、YAML、Markdown),语言检测和文字倒置
-   有文本区域覆盖的可编辑模式
-   行号
-   标签处理( 插入空格、 多行缩进、 外出)
-   编辑/错误召回
-   \\\\ 模板支持
-   语言模式
-   黑暗/光明主题
-   diff 模式

### 计划

-   自文档 REPL( 从编辑器执行代码)
-   智能脚本执行( 仅在更改时重运行)
-   Vibe 禁区( 防止父母的预览)
-   热州保护( 保留州通过重新执行)
-   代码折叠( 由于可编辑模式的复杂性而推迟)
-   检查模式( 单击预览元素以突出代码)
-   视觉编辑( 在预览中重排 )

## 许可证

麻省理工学院

## 常见问题

### @ape-egg/codie 是什么？

模块代码显示和编辑包

### 如何安装 @ape-egg/codie？

在项目目录运行 npm install @ape-egg/codie，或使用 pnpm add / yarn add / bun add。

### @ape-egg/codie 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/ape-egg\_\_codie 是否存在。

### @ape-egg/codie 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ape-egg/codie 可以商用吗？

@ape-egg/codie 使用 ISC 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ape-egg/codie 的下载量有多少？

根据 npm 官方下载统计，@ape-egg/codie 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,704 次，日均约 90 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ape-egg/codie 还在维护吗？

最新版本 0\.2\.4 发布于 2026/11/01（6 天前）；至今共发布 23 个版本，其中过去 12 个月发布了 23 个；首次发布于 2026/03/05。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。