# @diplodoc/color-extension 中文文档

规范地址：https://npmcn.com/package/%40diplodoc/color-extension/

版本：1\.0\.0
npm 元数据更新时间：2026-08-18T09:10:38.792Z
中文译文更新时间：2026-11-12T10:42:21.235Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：19.8 kB，11 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：markdown-it ^13\.0\.0
- 首次发布：2025-05-22T14:15:05.676Z
- 最新版本发布：2026-08-06T14:45:07.808Z
- 近 30 天下载量：20054（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 1 个）

## 中文简介

Diplodoc 变压器和构建器的内置颜色插件

## 安装

```sh
npm install @diplodoc/color-extension
```

也可以使用：`pnpm add @diplodoc/color-extension`、`yarn add @diplodoc/color-extension`、`bun add @diplodoc/color-extension`

## README

**英语** | [русский](https://github.com/diplodoc-platform/color-extension/blob/master/README.ru.md)

* * *

[![NPM version](https://img.shields.io/npm/v/@diplodoc/color-extension.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/color-extension) [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_color-extension&metric=alert_status)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_color-extension) [![Coverage](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_color-extension&metric=coverage)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_color-extension) [![Maintainability Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_color-extension&metric=sqale_rating)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_color-extension) [![Reliability Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_color-extension&metric=reliability_rating)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_color-extension) [![Security Rating](https://sonarcloud.io/api/project_badges/measure?project=diplodoc-platform_color-extension&metric=security_rating)](https://sonarcloud.io/summary/overall?id=diplodoc-platform_color-extension)

# @ diplodoc/ 彩色扩展

内嵌颜色插件 [迪普洛多克语Name](https://diplodoc.com/) 财务报告和审定财务报表 [缩放](https://github.com/markdown-it/markdown-it). 招标人 `{colorName}(text)` 作为样式的跨度(例如语义或自定义颜色).

## 安装

```bash
npm install @diplodoc/color-extension
```

**同伴依赖 :** `markdown-it` ^13.0.0 (英语).

## 快开始

```javascript
const MarkdownIt = require('markdown-it');
const colorPlugin = require('@diplodoc/color-extension');

const md = new MarkdownIt().use(colorPlugin);

md.renderInline('{green}(hello)');
// => '<span class="yfm-colorify yfm-colorify--green">hello</span>'
```

在无害环境管理方面:

```javascript
import MarkdownIt from 'markdown-it';
import colorPlugin from '@diplodoc/color-extension';

const md = new MarkdownIt().use(colorPlugin);
md.renderInline('{primary}(sample)');
```

## 语法

-   **模式 :** `{colorName}(content)`
-   **颜色名称 :** 任何有效的 CSS 颜色( 例如) . `red`, (中文(简体) ), `#f00`, (中文(简体) ), `rgb(255,0,0)`)或语义上的名称,如 `primary`, (中文(简体) ), `green`。 。 。 .
-   **嵌入颜色 :** `{green}(some {blue}(nested) text)`。 。 。 .

实例:

| 投入 | 输出( 默认) |
| --- | --- |
| `{green}(hello)` | `<span class="yfm-colorify yfm-colorify--green">hello</span>` |
| `{red}(alert)` | `<span class="yfm-colorify yfm-colorify--red">alert</span>` |
| `{green}(a {blue}(b) a)` | 绿色间距包括"a","蓝色间距""b","绿色间距""a" |

## API 密码

使用带有可选设置的插件 :

```javascript
const md = new MarkdownIt().use(colorPlugin, {
  defaultClassName: 'yfm-colorify', // base class; modifier is `${defaultClassName}--${colorName}`
  inline: false, // if true, add inline style="color: ${colorName};"
  escape: false, // if true, allow \ to escape parentheses inside content
});
```

### 选项

| 选项 | 默认 | 说明 |
| --- | --- | --- |
| `defaultClassName` | `'yfm-colorify'` | 基础 CSS 类; 修改器 `--${colorName}` 将添加. |
| `inline` | `false` | 何时 `true`,添加 `style="color: ${colorName};"` 至相间. |
| `escape` | `false` | 何时 `true`,反斜拉出括号内 `(content)` 如此字义 `(` 财务报告和审定财务报表 `)` 可以使用. |

### 示例:自定义类和内含样式

```javascript
const md = new MarkdownIt().use(colorPlugin, {
  defaultClassName: 'my-color',
  inline: true,
});

md.renderInline('{red}(sample)');
// => '<span class="my-color my-color--red" style="color: red;">sample</span>'
```

### 示例: 逃逸括号

与 `escape: true`, (中文(简体) ), `\(` 财务报告和审定财务报表 `\)` 内容内部以文字形式显示 `(` 财务报告和审定财务报表 `)`数字 :

```javascript
const md = new MarkdownIt().use(colorPlugin, {escape: true});
md.renderInline('{green}(some(2,3))'); // => green span with "some(2,3)"
md.renderInline('{green}(some\\(2,3\\))'); // => green span with "some(2,3)"
```

## 发展

-   **构建 :** `npm run build`
-   **测试 :** `npm test` (视频), `npm run test:watch`, (中文(简体) ), `npm run test:coverage`
-   **林特:** `npm run lint`, (中文(简体) ), `npm run lint:fix`
-   **类型检查 :** `npm run typecheck`

## 常见问题

### @diplodoc/color-extension 是什么？

Diplodoc 变压器和构建器的内置颜色插件

### 如何安装 @diplodoc/color-extension？

在项目目录运行 npm install @diplodoc/color-extension，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：markdown-it（^13\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @diplodoc/color-extension 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @diplodoc/color-extension 支持 ESM 还是 CommonJS？

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

### @diplodoc/color-extension 可以商用吗？

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

### @diplodoc/color-extension 的下载量有多少？

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

### @diplodoc/color-extension 还在维护吗？

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