# @calumk/codecup 中文文档

规范地址：https://npmcn.com/package/%40calumk/codecup/

版本：1\.9\.4
npm 元数据更新时间：2024-11-24T10:08:31.099Z
中文译文更新时间：2026-11-09T00:12:51.746Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40calumk/codecup
原文对照：https://npmcn.com/package/%40calumk/codecup/?lang=original
项目主页：https://github.com/calumk/codecup
源码仓库：https://github.com/calumk/codecup

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

- 包体积（解压后）：45.2 kB，4 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2022-05-28T17:52:29.475Z
- 最新版本发布：2024-11-24T10:08:30.944Z
- 近 30 天下载量：27348（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 0 个）

## 中文简介

一个超级网页的微码编辑器

## 安装

```sh
npm install @calumk/codecup
```

也可以使用：`pnpm add @calumk/codecup`、`yarn add @calumk/codecup`、`bun add @calumk/codecup`

## README

![](https://npmcn.com/package/%40calumk/codecup/assets/logo2.png#gh-dark-mode-only)  
![](https://npmcn.com/package/%40calumk/codecup/assets/logo.png#gh-light-mode-only)  
编码器:一个用于超级网页的微码编辑器.  
(原始内容存档于2013-10-12) (中文(简体) ) [代码Flask](https://github.com/kazzkiq/CodeFlask)(中文(简体) )

![](https://npmcn.com/package/%40calumk/codecup/assets/code.png)

## 为什么?

CodeFlask是一个辉煌的项目,但似乎没有得到维护,它需要一些重大更新才能与我正在研究的新项目合作.

### 厨房下沉示例

```js
cup = new codecup('#cf_holder', { 
    language: "javascript",
    lineNumbers: true ,
    copyButton: true,
    maxLines : 15,
    minLines : 5
});
```

### 变动

-   添加最大行号选项
-   从滚动到网络包装
-   已添加示例文件夹
-   禁用e2e测试
-   小型主题曲折 (边界,圆角. )
-   更新了所有 codeflask 引用到 codecup - 第13/11/2023号决议

> \[大 语言现在被加载了 async (通过棱镜), 这样您就可以加载您想要的任何语言, 而无需全部捆绑它们 。 - 2024年1月),字相会

> \[注\] 所支持的语文有: [https://prismjs.com/#被支持的语言](https://prismjs.com/#supported-languages)

### 核心更改为 PR

> (转入 [公关](https://github.com/kazzkiq/CodeFlask/pull/134) 给CodeFlask,以防它再次被捡起)

-   添加支持以毁灭
-   添加/ 删除行号
-   已添加行数切换
-   添加只读切换

* * *

## 安装

您可以通过 npm 安装代码:

```
npm i @calumk/codecup
```

或者通过cdn服务在浏览器中直接使用:

```
https://cdn.jsdelivr.net/npm/@calumk/codecup
```

## 使用量

```js
import codecup from '@calumk/codecup';

const cup = new codecup('#my-selector', { language: 'js' });
```

您也可以通过 DOM 元素而不是选择器 :

```js
import codecup from 'codecup';

const editorElem = document.getElementById('editor');
const cup = new codecup(editorElem, { language: 'js' });
```

使用阴影 DOM :

```js
import codecup from 'codecup';
...
const shadowElem = this.shadowRoot.querySelector('#editor');
const cup = new codecup(shadowElem, { language: 'js', styleParent: this.shadowRoot });
```

### 正在监听编辑器的更改

```js
cup.onUpdate((code) => {
  // do something with code here.
  // this will trigger whenever the code
  // in the editor changes.
});
```

### 程序更新编辑器

```js
// This will also trigger .onUpdate()
cup.updateCode('const my_new_code_here = "Blabla"');
```

### 从编辑器获取当前代码

```js
const code = cup.getCode();
```

### 复制按钮

现在默认启用了复制按钮,单击后将把代码复制到剪贴板上.

它可以通过路过而被禁用 `copyButton: false` 在选项中.

```js
const cup = new codecup('#my-selector', {
  language: 'javascript',
  copyButton: false
});
```

### 启用行号

```js
import codecup from 'codecup';

const cup = new codecup('#my-selector', {
  language: 'js',
  lineNumbers: true
});
```

您也可以在编辑器创建后切换行号 :

```js
cup.toggleLineNumbers();

```

### 设置最大行和分行

> \[大 截止 `1.90`,也可以设置最大行号,(默认为100),而分行号,(默认为1)

> \[注\] 如果你想成为固定的行数,将两者设置为同数.

```js
import codecup from 'codecup';

const cup = new codecup('#my-selector', {
  language: 'js',
  lineNumbers: true,
  maxLines: 10,
  minLines: 10
});
```

### 允许只读模式

```js
import codecup from 'codecup';

const cup = new codecup('#my-selector', {
  language: 'javascript',
  readonly: true
});
```

### 更改其他语言支持 :

```js
cup.updateLanguage('ruby')
// 
cup.updateLanguage('javascript')
//
```

#### 将“ Ruby” 动态变化添加到“ javascript” 的示例

```js
import Prism from 'prismjs';
import codecup from 'codecup';

const cup = new codecup('#my-selector', {
  language: 'ruby',
  readonly: true
});

cup.updateLanguage('javascript');
```

## 常见问题

### @calumk/codecup 是什么？

一个超级网页的微码编辑器

### 如何安装 @calumk/codecup？

在项目目录运行 npm install @calumk/codecup，或使用 pnpm add / yarn add / bun add。

### @calumk/codecup 支持 TypeScript 吗？

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

### @calumk/codecup 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @calumk/codecup 可以商用吗？

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

### @calumk/codecup 的下载量有多少？

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

### @calumk/codecup 还在维护吗？

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