# @fengkx/react-syntax-highlighter 中文文档

规范地址：https://npmcn.com/package/%40fengkx/react-syntax-highlighter/

版本：15\.6\.1
npm 元数据更新时间：2023-05-31T09:45:23.219Z
中文译文更新时间：2026-11-14T14:23:48.778Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：2.1 MB，1992 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：5 个
- peer 依赖：react \>= 0\.14\.0
- 首次发布：2023-05-31T08:34:46.355Z
- 最新版本发布：2023-05-31T09:03:44.808Z
- 近 30 天下载量：12733（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

用内线样式突出显示与棱镜反应或突出显示正弦的元件

## 安装

```sh
npm install @fengkx/react-syntax-highlighter
```

也可以使用：`pnpm add @fengkx/react-syntax-highlighter`、`yarn add @fengkx/react-syntax-highlighter`、`bun add @fengkx/react-syntax-highlighter`

## README

## 反演语法突出显示器

> 原Repo 的分叉将 refractor 升级到 v4

[![Actions Status](https://github.com/react-syntax-highlighter/react-syntax-highlighter/workflows/Node%20CI/badge.svg)](https://github.com/conorhastings/react-syntax-highlighter/actions) [![npm](https://img.shields.io/npm/dm/react-syntax-highlighter.svg?style=flat-square)](https://www.npmjs.com/package/react-syntax-highlighter)

语法突出显示组件 `React` 使用 严重超级惊人 [低光线](https://github.com/wooorm/lowlight) 财务报告和审定财务报表 [缓冲器](https://github.com/wooorm/refractor) 以 [呜呜](https://github.com/wooorm)

检查一个小演示 [这里](https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/) 并看到动作中突出显示生成的测试代码的组件 [这里](https://conorhastings.github.io/redux-test-recorder/demo/)。 。 。 .

对于本地反应, 您可以使用 [反应 - 内语法 - 高亮](https://github.com/conorhastings/react-native-syntax-highlighter)

### 安装

`npm install react-syntax-highlighter --save`

### 为什么是这个?

还有其他语法亮点 `React` 为什么用这个? 最大的原因是其他人 都依赖触发电话 `componentDidMount` 财务报告和审定财务报表 `componentDidUpdate` 以突出显示代码块,然后用 `dangerouslySetInnerHTML` 或只是手动修改 DOM 与本地的javascript。 使用语法树来动态地构建虚拟多姆,只允许更新正在变化的DOM,而不是在任何变化上完全覆盖它,因此它也使用更平庸的方法 `React` 并允许使用带入 `React` 截止 `0.14`。 。 。 .

### 爪哇语样式!

我试图为自己的项目找到一个语法亮点 最大的痛苦点之一是需要在我的页面上贴上一个样式表标签。 我想提供箱外代码 与我的模块 不要求尴尬 包含另一个libs样式表。 此模块中的样式都是基于javascript的,所有样式都由 `highlight.js` 已经移植 !

我确实意识到javascript的样式不是每个人都有的,所以你可以选择使用以cs为基础的样式,通过设置道具添加到元素中的类名 `useInlineStyles` 改为 `false` (默认为 `true`) (中文(简体) ).

### 使用

#### 道具

-   `language` - 要突出代码的语言。 可用选项 [这里的hljs](https://npmcn.com/package/%40fengkx/react-syntax-highlighter/AVAILABLE_LANGUAGES_HLJS.MD) 财务报告和审定财务报表 [此处为棱镜](https://npmcn.com/package/%40fengkx/react-syntax-highlighter/AVAILABLE_LANGUAGES_PRISM.MD). (通过文本来仅仅使纯单相距文本)
-   `style` - 从样式/hljs或样式/prism目录中需要的样式对象,取决于您是否从中导入 `react-syntax-highlighter` 或者说 `react-syntax-highlighter/prism` 目录 [这里的hljs](https://npmcn.com/package/%40fengkx/react-syntax-highlighter/AVAILABLE_STYLES_HLJS.MD).和 [此处为棱镜](https://npmcn.com/package/%40fengkx/react-syntax-highlighter/AVAILABLE_STYLES_PRISM.MD)。 。 。 . `import { style } from 'react-syntax-highlighter/dist/esm/styles/{hljs|prism}'` 。如果不包含样式,将使用默认值.
-   `children` - 要突出的代码.
-   `customStyle` - 与前标签上的顶层样式结合的道具,这里的样式会覆盖更早的样式.
-   `codeTagProps` - 将传播到 `<code>` 标记是突出显示的代码元素的直接父代码。 用于样式/指定类名 .
-   `useInlineStyles` - 如果此道具作为假名传递, 反应语法亮点将不会将样式对象添加到元素中, 而会附加类名 。 然后,可以使用高亮.js提供的 CSS 文件之一来给代码块样式.
-   `showLineNumbers` - 如果启用此选项, 将显示代码块旁边的行号 .
-   `showInlineLineNumbers` - 如果与下列同时启用: `showLineNumbers`,行号将变为每行,这样,行号在使用诸如 [反应-语法-高亮-虚拟-发音](https://github.com/conorhastings/react-syntax-highlighter-virtualized-renderer). (如果 `showLineNumbers` 实值 `false`. ) (中文(简体) )
-   `startingLineNumber` - 狦 `showLineNumbers` 被启用的行号将从这里开始.
-   `lineNumberContainerStyle` - 行号容器默认在左侧出现,并有10px的右贴。 你可以用它来取代那些风格.
-   `lineNumberStyle` - 内置样式,将传递到每个数字的包接中。 可以是接收当前行号作为参数和返回样式对象的对象或函数.
-   `wrapLines` - 布尔值,用于确定每一行代码是否应当被母元素所包裹。 默认为虚假,当虚假不能对行平面上的元素采取行动时。 你可以看到一个实例 能够使 [这里](https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/diff.html)
-   `wrapLongLines` - 布尔以指定是否样式 `<code>` 块为 `white-space: pre-wrap` 或者说 `white-space: pre`。 。 。 . [演示](https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/)
-   `lineProps` - 如果包装线是真实的,则将道具传递到每一行的横幅上。 可以是接收当前行号作为参数和返回道具对象的对象或函数.
-   `renderer` - 用于渲染代码行的可选自定义渲染器。 见 [这里](https://github.com/conorhastings/react-syntax-highlighter-virtualized-renderer) 举个例子.
-   `PreTag` - 元素或自定义反应组件,以取而代之的是默认的预标记,即组件最外端的标记(用于不针对DOM的自定义渲染器).
-   `CodeTag` - 元素或自定义反应组件,以取代默认的代码标记,即组件树的第二个标记(用于不瞄准DOM的自定义渲染器).
-   `spread props` 传递任意道具以预取标签包装代码.

```js
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';
const Component = () => {
  const codeString = '(num) => num + 1';
  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {codeString}
    </SyntaxHighlighter>
  );
};
```

### 棱镜

使用 [缓冲器](https://github.com/wooorm/refractor) 我们可以使用从Prism.js语言上构建的星座,而不是突起.js. 特别是当突出jsx时,这是有好处的,这个问题早就被这个模块所解决了. 使用时的语义基本相同,虽然一个光线模式尚未被支持(尽管未来即将到来). 您可以使用 Prism( 减压器) 查看演示( 有 jsx) [这里](https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html)。 。 。 .

```js
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { dark } from 'react-syntax-highlighter/dist/esm/styles/prism';
const Component = () => {
  const codeString = '(num) => num + 1';
  return (
    <SyntaxHighlighter language="javascript" style={dark}>
      {codeString}
    </SyntaxHighlighter>
  );
};
```

### 光线构建

以上述方式使用的反应语法高亮器可以有相当大的足迹. 对那些希望更能控制自己需要什么的人来说,可以选择进口一个灯塔。 如果您选择使用此选项, 您需要专门导入想要使用的语言, 并使用 Language 从光线构建导出来注册它们 。 也没有提供默认样式 .

```js
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import docco from 'react-syntax-highlighter/dist/esm/styles/hljs/docco';

SyntaxHighlighter.registerLanguage('javascript', js);
```

你可以要求 `PrismLight` 从 `react-syntax-highlighter` 用于使用棱镜光建而不是标准光建.

```jsx
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism';

SyntaxHighlighter.registerLanguage('jsx', jsx);
```

### Async 构建

对于最佳的捆绑大小来渲染ASAP,有Async版本的棱光和光. 此版本需要您使用一个支持动态导入语法的捆绑器, 如 Webpack. 这将延后对 refractor (17kb gzipped) 语言的加载, 而代码拆分被加载, 代码会显示行号 但没有强调.

棱镜版本 :

```js
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
```

突出显示版本

```js
import { LightAsync as SyntaxHighlighter } from 'react-syntax-highlighter';
```

#### 支持的语言

通过 `supportedLanguages` 静态场.

```js
SyntaxHighlighter.supportedLanguages;
```

### 以反演语法突出显示器构建

-   [mdx- 头部](https://github.com/jxnblk/mdx-deck) - 基于MDX的演示文稿
-   [码盘](https://github.com/Bogdan-Lyashenko/codecrumbs) - 通过将面包屑放入源代码来学习、设计或文件编码库。 现场更新,多语种支持,并方便分享.
-   [光谱编辑器](https://github.com/FormidableLabs/spectacle-editor) - 一个基于电子的应用程序,用于创建、编辑、保存和出版Spectacle演示文稿。 在综合支持下.
-   [超级集](https://github.com/airbnb/superset) - Superset是一个数据探索平台,设计为视觉,直观,互动.
-   [白日梦](https://github.com/segmentio/daydream) - 铬扩展记录你的行动 [噩梦](https://github.com/segmentio/nightmare) 脚本
-   [代码文件](https://github.com/B1naryStudio/CodeDoc) - 以电子为基础的应用程序构建,用于创建项目文件
-   [反应组件演示](https://github.com/conorhastings/react-component-demo) - 反应组件 制作其他 React 组件的活性可编辑演示.
-   [Redux 测试记录器](https://github.com/conorhastings/redux-test-recorder) - 通过ui互动自动生成还原器测试的reux中端软件。 反应插件使用的语法突出显示器.
-   [基点](https://github.com/gitpoint/git-point) - GitHub为iOS服务. 由React Industrial所建. 星洲网. (使用反应-内语-语法-高亮)
-   [瑜伽布局游戏场](https://yogalayout.com/playground) - 生成多种语言的瑜伽布局代码
-   [基巴纳](https://github.com/elastic/kibana) - 以浏览器为基础的分析以及搜索“弹性搜索”仪表板.
-   [戈兰奇网络](https://github.com/golangci/golangci-web)
-   [故事书 官方Addons](https://github.com/storybooks/storybook)
-   [微软快取DNA](https://github.com/Microsoft/fast-dna/)
-   [阿里巴巴冰块](https://github.com/alibaba/ice)
-   [Uber BaseUI 文档](https://github.com/uber-web/baseui)
-   [反应 选择文档](https://github.com/JedWatson/react-select)
-   [自动放出](https://github.com/0123cf/auto-layout) - 使用弹性布局
-   [npm视图](https://github.com/pd4d10/npmview) - 查看 npm 包文件的网络应用程序
-   [静态表](https://www.staticforms.xyz/) - 为您的静态网站免费提供 HTML 表格.
-   [反应DemoTab](https://github.com/mkosir/react-demo-tab) - 反应组件,以方便创建其他组件的演示
-   [密码打印器](https://github.com/jaredpetersen/codeprinter) - 很容易打印代码
-   [神经态主义](https://www.neumorphism.io/) - 软UI/新形态主义阴影的 CSS 代码生成器
-   [葡萄树](https://www.grapeui.com/) - 使用有样式的系统和其他开源组件的组件库.
-   [QQ 良好Arduino 代码](https://goodarduinocode.com/) - 阿尔杜伊诺编译图书库
-   [马尔莫塔.app](https://marmota.app/) - 一个桌面应用程序,用于创建简单的平分演示文稿

如果您的项目使用反应语法高亮器, 请发送 pr 添加 !

### 许可证

麻省理工学院

## 常见问题

### @fengkx/react-syntax-highlighter 是什么？

用内线样式突出显示与棱镜反应或突出显示正弦的元件

### 如何安装 @fengkx/react-syntax-highlighter？

在项目目录运行 npm install @fengkx/react-syntax-highlighter，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>= 0\.14\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @fengkx/react-syntax-highlighter 支持 TypeScript 吗？

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

### @fengkx/react-syntax-highlighter 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fengkx/react-syntax-highlighter 可以商用吗？

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

### @fengkx/react-syntax-highlighter 的下载量有多少？

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

### @fengkx/react-syntax-highlighter 还在维护吗？

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