# @bomdi/codebox 中文文档

规范地址：https://npmcn.com/package/%40bomdi/codebox/

版本：2\.0\.1
npm 元数据更新时间：2026-11-08T05:32:41.395Z
中文译文更新时间：2026-11-08T10:43:26.314Z
软件包许可：ISC

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

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

弃用说明：Deprecated: use @clepit/core, whose editor ships a code block\. See https://clepit\.com

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

- 包体积（解压后）：20.3 kB，4 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2020-02-12T00:05:39.801Z
- 最新版本发布：2026-11-08T05:10:52.567Z
- 近 30 天下载量：7690（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：15（近 12 个月 1 个）

## 中文简介

Editor.js 的代码语法加亮工具

## 安装

```sh
npm install @bomdi/codebox
```

也可以使用：`pnpm add @bomdi/codebox`、`yarn add @bomdi/codebox`、`bun add @bomdi/codebox`

## README

# 代码框

> ## 折旧
> 
> **此套件不再保留. 它的继任者是 [隐藏](https://clepit.com/)。 。 。 .**
> 
> Clepit是来自同一支队伍的块式编辑和渲染器. 其编辑器搭载了带有语法突出的代码块,因此已不需要CodeBox了.
> 
> -   编辑文档,代码块包括: [`@clepit/core`](https://www.npmjs.com/package/@clepit/core)
> -   在 React 中渲染文档 : [`@clepit/react`](https://www.npmjs.com/package/@clepit/react)
> -   块类型和 JSON 形状 : [clepit.com/docs/块](https://clepit.com/docs/blocks)
> 
> 现有安装继续工作. 以下文件仍供遗产使用.

[![](https://img.shields.io/npm/v/@bomdi/codebox)](https://www.npmjs.com/package/@bomdi/codebox) [![](https://img.shields.io/npm/dw/@bomdi/codebox)](https://www.npmjs.com/package/@bomdi/codebox) [![](https://flat.badgen.net/npm/license/@bomdi/codebox)](https://www.npmjs.com/package/@bomdi/codebox) [![](https://flat.badgen.net/badge/icon/typescript?icon=typescript&label)](https://www.npmjs.com/package/@bomdi/codebox)

代码语法突出显示工具 [编辑.js](https://editorjs.io/)

## 设置

通过国家预防机制安装软件包

```shell
npm i @bomdi/codebox
```

添加到模块/应用程序

```javascript
import CodeBox from '@bomdi/codebox';
OR
const CodeBox = require('@bomdi/codebox');
```

## 使用量

添加代码框 `tools` 属性.

```javascript
const CodexEditor = require('@editorjs/editorjs');

let editor = new CodexEditor({
  ...

  tools: {
    ...
    codeBox: {
      class: CodeBox,
      config: {
        themeURL: 'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/dracula.min.css', // Optional
        themeName: 'atom-one-dark', // Optional
        useDefaultTheme: 'light' // Optional. This also determines the background color of the language select drop-down
      }
    },
  }

  ...
});
```

## 配置参数

**所有参数都是可选的**

| 外地 | 类型 | 说明 |
| --- | --- | --- |
| 主题URL | `string` | URL 指向 CSS 文件,可供您使用 [突出显示.js](https://highlightjs.org/)。这也可以指向您自定义的 CSS 语法文件 。 若为 **主题URL** 提供, **主题Name** 财务报告和审定财务报表 **默认主题** 将被忽略 |
| 主题Name | `string` | 任何一个 [已接受的主题名称](https://github.com/highlightjs/highlight.js/tree/master/src/styles) 用于 **突出显示.js**。只需要名称,而不是完整的URL(例如"a11y-dark"). 若为 **主题Name** 提供, **默认主题** 将被忽略 |
| 默认主题 | `string` | **代码框** 有两个默认主题 - 1 光和 1 暗。 您可以通过传递字符串指定应用什么默认值 **光线** 或者说 **"黑暗"** 转到此参数。 注意设置 **主题URL** 或者说 **主题Name** 覆盖主代码块的设置, 但是, 语言选择元素/ 下拉菜单的背景由这个值设置 |

如果没有指定参数, CodeBox 默认为暗主题.

## 产出数据

CodeBox 返回以下数据

```json
{
  "type": "codeBox",
  "data": {
    "code": "consttest = newTest();.codeBoxTextArea{\n  width: 100%;\n  min-height: 30px;\n  padding: 10px;\n  border-radius: 2px 2px 2px 0;\n  border: none !important;\n  outline: none !important;\n  font: 14px monospace;\n}\n\n.codeBoxSelectDiv{\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  position: relative;\n}",
    "language": "css",
    "theme": "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"
  }
}
```

## 将数据保存为组件

如果您使用反应, 您可以将保存的数据传递到库中 [编辑器](https://www.npmjs.com/package/editorjs-react-renderer) 以渲染代码块组件

```javascript
import { CodeBoxOutput } from 'editorjs-react-renderer';

const data = {
  "type": "codeBox",
  "data": {
    "code": ".codeBoxTextArea{\n  width: 100%;\n  min-height: 30px;\n  padding: 10px;\n  border-radius: 2px 2px 2px 0;\n  border: none !important;\n  outline: none !important;\n  font: 14px monospace;\n}\n\n.codeBoxSelectDiv{\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: flex-start;\n  position: relative;\n}",
    "language": "css",
    "theme": "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"
  }
};

const CodeBlock = () => CodeBoxOutput(data);

export default CodeBlock;
```

## 作者

德夫·朱尤

[联系我们](https://bomdisoft.com/)

[学习](https://devjuju.com/)

## 常见问题

### @bomdi/codebox 是什么？

Editor\.js 的代码语法加亮工具注意：该包已被作者标记为弃用——Deprecated: use @clepit/core, whose editor ships a code block\. See https://clepit\.com

### 如何安装 @bomdi/codebox？

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

### @bomdi/codebox 支持 TypeScript 吗？

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

### @bomdi/codebox 支持 ESM 还是 CommonJS？

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

### @bomdi/codebox 可以商用吗？

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

### @bomdi/codebox 的下载量有多少？

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

### @bomdi/codebox 还在维护吗？

最新版本 2\.0\.1 发布于 2026/11/08（今天）；至今共发布 15 个版本，其中过去 12 个月发布了 1 个；首次发布于 2020/02/12。作者已将其标记为弃用，新项目建议寻找替代方案。