React Syntax Highlighter 快速入门：为你的应用添加代码高亮 – wiki基地

作者： /

React Syntax Highlighter 快速入门：为你的应用添加代码高亮

在现代 Web 应用中，尤其是技术博客、文档站点、在线教程或编程社区，展示代码片段是一个核心需求。仅仅将代码作为普通文本显示，会降低其可读性，使得代码结构和语法特点不那么清晰。而代码高亮（Syntax Highlighting）能够通过不同的颜色和样式区分关键字、字符串、注释、变量等元素，极大地提升代码的可读性和美观度。

对于使用 React 构建的应用来说，集成一个易于使用的代码高亮库是提升用户体验的关键一步。React Syntax Highlighter 正是这样一个优秀的库。它是一个基于 Virtual DOM 的 React 组件，能够轻松地将代码字符串渲染成带有语法高亮效果的 HTML。

本文将带你一步步了解如何快速入门 React Syntax Highlighter，为你的 React 应用添加强大的代码高亮功能。

为什么选择 React Syntax Highlighter？

市面上有不少 JavaScript 代码高亮库（如 Prism.js, highlight.js）。React Syntax Highlighter 的优势在于：

  1. React Native 集成友好： 它最初是为 React Native 设计的，但同样完美支持 React for Web。这使得在跨平台应用中保持一致的代码展示风格变得可能。
  2. 组件化： 作为一个 React 组件，它可以无缝集成到你的组件树中，遵循 React 的开发范式。
  3. 支持多种高亮引擎和样式： 它并不强制你使用特定的高亮引擎，而是支持 highlight.js 和 prism.js 的多种主题样式，为你提供了丰富的视觉选择。
  4. 轻量级： 通过按需导入样式，可以有效控制最终打包文件的大小。

前提条件

在开始之前，你需要：

  1. 一个 React 项目： 可以是一个新建的 Create React App、Vite 项目，或任何其他基于 React 的应用。
  2. Node.js 和 npm 或 yarn： 用于安装依赖包。
  3. 基本的 React 知识： 了解如何创建和使用组件，以及 JSX 语法。

第一步：安装依赖

首先，你需要在你的 React 项目中安装 react-syntax-highlighter 库。打开你的项目终端，运行以下命令：

使用 npm:

bash
npm install react-syntax-highlighter --save

使用 yarn:

bash
yarn add react-syntax-highlighter

安装完成后，react-syntax-highlighter 将被添加到你项目的 package.json 文件中。

需要注意的是，react-syntax-highlighter 本身不包含任何高亮样式（主题）。这样做是为了让你能够按需加载所需的样式，避免不必要的打包体积。因此，你通常还需要从库提供的样式模块中导入至少一个样式。这些样式通常基于流行的代码高亮库，如 highlight.js (hljs) 或 prism.js (prism)。

我们将以 highlight.js 的样式为例，因为它的样式数量相对较多且经典。

第二步：基本使用

安装完成后，你就可以在你的 React 组件中使用 SyntaxHighlighter 了。最基本的使用方法是导入组件和选择一个样式，然后将你的代码字符串作为子元素传递给组件。

创建一个新的 React 组件（例如 CodeBlock.js）或在现有组件中使用：

“`jsx
// CodeBlock.js 或你的组件文件

import React from ‘react’;
import { Light as SyntaxHighlighter } from ‘react-syntax-highlighter’; // 导入组件
// 注意：通常我们按需导入，例如导入 hljs 引擎相关的组件
// import { Prism as SyntaxHighlighter } from ‘react-syntax-highlighter’; // 如果想使用 prism.js 引擎

// 导入一个主题样式
import { docco } from ‘react-syntax-highlighter/dist/esm/styles/hljs’;
// 如果你想使用 prism 样式，可以从这里导入：
// import { dark } from ‘react-syntax-highlighter/dist/esm/styles/prism’;

function CodeBlock() {
// 你要高亮显示的代码字符串
const codeString = `function greet(name) {
console.log(‘Hello, ‘ + name + ‘!’);
}

greet(‘React Syntax Highlighter’);`;

return (

{codeString}

);
}

export default CodeBlock;
“`

在上面的例子中：

  1. 我们从 react-syntax-highlighter 导入了 Light 或 Prism 组件。这里导入 Light 是指使用 highlight.js 相关的底层引擎和样式。如果你更偏爱 prism.js，则可以导入 Prism。在实际使用中，你通常只需要选择其中一种风格。为了简单起见，后续例子我们将主要使用 Light (对应 hljs 样式)。
  2. 我们从 react-syntax-highlighter/dist/esm/styles/hljs 导入了一个名为 docco 的样式。你可以根据需要导入其他样式。
  3. 我们定义了一个 codeString 变量，里面包含了我们要展示的代码。记住：代码内容必须是一个字符串。 使用 JavaScript 的模板字符串（使用反引号 ````）非常方便书写多行代码。
  4. 我们将 codeString 作为 SyntaxHighlighter 组件的子元素传递。
  5. 通过 language prop 指定了代码的语言类型，这里是 "javascript"。正确的语言类型是实现准确高亮的关键。
  6. 通过 style prop 将导入的 docco 样式对象传递给组件。

现在，你可以在你的应用的其他组件中导入并使用 CodeBlock 组件：

“`jsx
// App.js 或你的父组件

import React from ‘react’;
import CodeBlock from ‘./CodeBlock’; // 导入我们刚刚创建的 CodeBlock 组件

function App() {
return (

我的代码示例

{/ 在这里使用 CodeBlock /}

上面的代码演示了一个简单的 JavaScript 函数。

);
}

export default App;
“`

运行你的 React 应用 (npm start 或 yarn start)，你应该能看到你的 JavaScript 代码已经被 docco 样式高亮显示了。

第三步：探索不同的样式（主题）

react-syntax-highlighter 支持大量的样式，你可以根据你的应用设计选择最合适的。这些样式通常存放在 react-syntax-highlighter/dist/esm/styles/hljs 和 react-syntax-highlighter/dist/esm/styles/prism 目录下。

要尝试不同的样式，你只需要改变导入的样式文件和在 style prop 中使用的对象。

例如，要使用 atom-one-dark 样式：

“`jsx
import React from ‘react’;
import { Light as SyntaxHighlighter } from ‘react-syntax-highlighter’;
// 从 hljs 样式库中导入 atom-one-dark 样式
import { atomOneDark } from ‘react-syntax-highlighter/dist/esm/styles/hljs’;

function CodeBlock() {
const codeString = `function greet(name) {
console.log(‘Hello, ‘ + name + ‘!’);
}

greet(‘React Syntax Highlighter’);`;

return (
// 改变 style prop 为导入的 atomOneDark 样式

{codeString}

);
}

export default CodeBlock;
“`

你可以浏览 node_modules/react-syntax-highlighter/dist/esm/styles/hljs 和 node_modules/react-syntax-highlighter/dist/esm/styles/prism 目录来查看所有可用的样式名称，或者查阅库的官方文档。一些流行的样式包括：

  • hljs: atomOneDark, atomOneLight, github, githubDark, dracula, monokai, vs, xcode 等。
  • prism: dark, light, solarizedlight, tomorrow 等。

选择一个与你应用整体风格协调的主题非常重要。

第四步：指定代码语言（language Prop）

准确指定 language prop 是获得正确高亮效果的关键。react-syntax-highlighter 内部依赖于底层高亮库（如 highlight.js 或 prism.js）来识别语法。这些库支持的语言非常广泛。

常见的语言标识符包括：

  • JavaScript: "javascript", "js"
  • HTML: "html", "xml"
  • CSS: "css"
  • Python: "python", "py"
  • Java: "java"
  • C++: "cpp"
  • Markdown: "markdown", "md"
  • JSON: "json"
  • JSX: "jsx" (特别 useful for React examples)
  • TypeScript: "typescript", "ts"
  • Bash/Shell: "bash", "shell"

如果你不确定某个语言的标识符，可以尝试常见的缩写，或者查阅 highlight.js 或 prism.js 的官方文档，因为 react-syntax-highlighter 的语言支持很大程度上取决于它们。

示例：高亮显示 JSX 代码

“`jsx
import React from ‘react’;
import { Light as SyntaxHighlighter } from ‘react-syntax-highlighter’;
import { atomOneDark } from ‘react-syntax-highlighter/dist/esm/styles/hljs’;

function JSXCodeBlock() {
const jsxCodeString = `import React from ‘react’;

function MyComponent() {
return (

Hello, World!

This is a JSX example.

);
}

export default MyComponent;`;

return (
// 将 language 设置为 “jsx”

{jsxCodeString}

);
}

export default JSXCodeBlock;
“`

第五步：显示行号 (showLineNumbers Prop)

对于代码块，尤其是在文档或教程中，显示行号可以帮助读者更容易地引用代码的特定部分。SyntaxHighlighter 提供了一个简单的 showLineNumbers 布尔属性来实现这个功能。

只需在 SyntaxHighlighter 组件上添加 showLineNumbers prop 并设置为 true：

“`jsx
import React from ‘react’;
import { Light as SyntaxHighlighter } from ‘react-syntax-highlighter’;
import { atomOneDark } from ‘react-syntax-highlighter/dist/esm/styles/hljs’;

function CodeBlockWithLines() {
const codeString = `function greet(name) {
console.log(‘Hello, ‘ + name + ‘!’); // This is line 2
}

// Let’s add a comment on line 5

greet(‘React Syntax Highlighter’); // Line 7
`;

return (

{codeString}

);
}

export default CodeBlockWithLines;
“`

现在，你的代码块左侧就会显示对应的行号了。

如果你需要让行号从某个特定的数字开始（例如，当你的代码块只是一个文件的一部分时），你可以使用 startingLineNumber prop：

“`jsx
// 让行号从 10 开始显示
<SyntaxHighlighter
language=”javascript”
style={atomOneDark}
showLineNumbers={true}
startingLineNumber={10} // 行号从 10 开始

{codeString}

“`

第六步：自定义样式和容器 (preTagProps, codeTagProps, lineProps)

虽然样式主题提供了整体外观，但有时你可能需要对代码块的特定部分进行更细粒度的控制，例如调整字体、行高、背景填充等。SyntaxHighlighter 渲染的代码通常包含在一个 <pre> 标签和一个 <code> 标签中。你可以通过 preTagProps 和 codeTagProps prop 为这两个标签添加自定义属性，包括 style 或 className。

使用 preTagProps 和 codeTagProps:

“`jsx
import React from ‘react’;
import { Light as SyntaxHighlighter } from ‘react-syntax-highlighter’;
import { atomOneDark } from ‘react-syntax-highlighter/dist/esm/styles/hljs’;

function CustomStyledCodeBlock() {
const codeString = console.log('Custom styles applied!');;

return (
标签添加自定义 style 或 className
preTagProps={{
style: {
maxHeight: ‘300px’, // 示例：设置最大高度并允许滚动
overflow: ‘auto’,
borderRadius: ‘8px’, // 示例：添加圆角
padding: ’20px’, // 示例：增加内边距 (可能会覆盖主题默认值，注意调整)
// 你可以在这里覆盖主题的背景色、字体大小等
// backgroundColor: ‘#282c34’, // 示例：明确指定背景色
// fontSize: ‘0.9rem’,
},
// 或者添加 className
// className: ‘my-custom-code-pre’,
}}
// 为 \ 标签添加自定义 style 或 className
codeTagProps={{
style: {
fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace', // 示例：指定字体族
// backgroundColor: 'transparent', // 通常保持透明，让 pre 的背景色生效
},
// 或者添加 className
// className: 'my-custom-code-code',
}}
>
{codeString}

);
}

export default CustomStyledCodeBlock;
```

preTagProps 和 codeTagProps 都接受一个对象，这个对象会被展开并作为属性应用到 <pre> 和 <code> 元素上。你可以设置 style 对象来应用内联样式，或者设置 className 来应用 CSS 类。

高亮特定行 (lineProps):

高亮代码块中的特定行是一个更高级的需求。react-syntax-highlighter 提供了 lineProps prop，它允许你为每一行代码的容器元素（通常是一个 <span> 或根据配置可能是 <li> 当显示行号时）提供属性。这通常需要一个函数，该函数接收行号作为参数，并返回要应用于该行的属性对象。

这个功能相对复杂，因为它需要你编写逻辑来判断哪些行需要高亮。下面是一个基本示例，演示如何高亮第 3 行和第 7 行：

```jsx
import React from 'react';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';

function HighlightSpecificLines() {
const codeString = `function greet(name) {
console.log('Hello, ' + name + '!'); // Line 2
}

// Let's highlight line 5
const message = "Highlight me!"; // Line 5

greet('React Syntax Highlighter'); // Line 7 - Highlight me too!
`;

// 定义要高亮的行号数组
const linesToHighlight = [5, 7];

// lineProps 可以是一个对象，或者一个函数
// 如果是函数，它接收 lineNumber (从 1 开始) 和 line (行的字符串内容) 作为参数
const customLineProps = (lineNumber) => {
// 如果当前行号在我们要高亮的数组中
if (linesToHighlight.includes(lineNumber)) {
return {
style: {
backgroundColor: '#ffffcc', // 示例：浅黄色背景
display: 'block', // 确保背景覆盖整行
},
};
}
// 否则，返回一个空对象或 null
return {};
};

return (

{codeString}

);
}

export default HighlightSpecificLines;
```

在这个例子中，lineProps 被设置为一个函数，它检查当前的 lineNumber 是否在 linesToHighlight 数组中，如果是，就返回一个包含背景色的样式对象。display: 'block' 样式是必要的，以确保背景色填充整个行宽。

请注意，lineProps 函数接收的 lineNumber 是从 1 开始计数的，对应于代码块中的实际行号。

最佳实践与注意事项

  1. 选择合适的高亮引擎： react-syntax-highlighter 同时支持 highlight.js 和 prism.js 的样式。导入 Light 组件通常与 highlight.js 样式配合，导入 Prism 组件则与 prism.js 样式配合。选择哪一个取决于你对它们样式主题的偏好，以及它们对特定语言的支持程度。一旦选定，最好在整个应用中保持一致。
  2. 按需导入样式： 正如安装部分提到的，只导入你实际使用的样式文件，可以显著减小最终打包文件的大小。不要尝试导入整个样式目录。
  3. 处理长代码行： 如果你的代码行非常长，可能会超出容器宽度。默认情况下，代码块可能会出现水平滚动条（<pre> 标签的默认行为）。你可以通过 preTagProps 调整样式，例如设置 overflowX: 'auto' 来确保滚动条出现，或者尝试设置 whiteSpace: 'pre-wrap' 来允许长行自动换行（这可能会影响代码布局，需要谨慎使用）。
  4. 代码字符串的处理： 确保传递给 SyntaxHighlighter 的是纯净的代码字符串。避免在代码字符串中包含额外的 HTML 标签或不相关的文本，这可能会干扰高亮引擎的解析。使用模板字符串 ```` 是一个好习惯，可以保留代码的原始格式（缩进、换行）。
  5. 性能考虑： 对于非常大的代码块或页面上有大量的代码块，语法高亮可能会消耗一定的计算资源。在大多数常见用例中，这不会成为问题。如果遇到性能瓶颈，可以考虑代码分割、延迟加载或虚拟列表等优化手段，但这超出了快速入门的范围。

总结

通过本文，我们学习了如何快速地在 React 应用中集成 react-syntax-highlighter，为代码片段添加专业的语法高亮效果。我们涵盖了：

  • 安装依赖。
  • 最基本的使用方式，包括导入组件、样式和设置代码内容及语言。
  • 如何选择和应用不同的样式主题。
  • 如何显示和控制行号。
  • 如何使用 preTagProps 和 codeTagProps 进行容器级别的样式自定义。
  • 如何使用 lineProps 高亮特定的代码行。
  • 以及一些使用过程中的最佳实践和注意事项。

React Syntax Highlighter 是一个强大而灵活的工具，能够显著提升你的应用中代码展示的质量和用户体验。掌握了这些基础知识，你就可以轻松地为你的技术内容增添光彩，让代码更加易读、易懂。

更高级的用法，例如自定义语言解析规则、与其他库（如 markdown-to-jsx）结合使用、或者深入探索 lineProps 实现更复杂的行样式逻辑，可以在你熟练掌握基本用法后，进一步查阅 react-syntax-highlighter 的官方文档进行深入学习。

现在，就开始为你的 React 应用添加漂亮的代码高亮吧！

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部