如何使用"react-syntax-highlighter": "^12.2.1"

`react-syntax-highlighter`是一个用于React应用中的代码高亮库，它可以让你在渲染中轻松地为各种编程语言提供语法高亮。当你需要在组件中显示代码片段并使其看起来更易阅读时，这个库非常有用。

以下是如何使用`react-syntax-highlighter`的步骤：

1. **安装依赖**:
使用npm或yarn来安装版本12.2.1：

   npm install react-syntax-highlighter@12.2.1
   或者
   yarn add react-syntax-highlighter@12.2.1

2. **导入库和样式**:
在你的React组件中，导入`hljs`（用于实际的语法高亮）和`SyntaxHighlighter`组件：

   import React from 'react';
   import hljs from 'react-syntax-highlighter/dist/esm/hljs.min.js';
   import { SyntaxHighlighter, Code } from 'react-syntax-highlighter/dist/esm/prism-react-renderer';
   import 'react-syntax-highlighter/dist/esm/styles/prism.css'; // 引入你喜欢的样式，如Prism主题

3. **创建语法高亮组件**:
创建一个函数组件，接受`code`（你要高亮的代码字符串）作为props，并使用`SyntaxHighlighter`包裹`Code`元素：

   const HighlightedCode = ({ language, code }) => {
     return (
       <SyntaxHighlighter language={language} customStyle={myCustomStyle}>
         <Code>{code}</Code>
       </SyntaxHighlighter>
     );
   };

   // 如果你需要动态语言设置，可以在函数内部判断：
   const myCustomStyle = /* ... */; // 根据需求自定义样式

   // 使用组件示例：
   <HighlightedCode language="javascript" code={`function helloWorld() { console.log('Hello, world!'); }`} />

4. **处理不同语言的代码**:
`SyntaxHighlighter`组件接受`language` prop，确保根据实际代码内容提供正确的语言标识。`react-syntax-highlighter`支持多种编程语言。

5. **定制样式**:
你可以覆盖默认样式或者创建自定义样式(`myCustomStyle`在上面的例子中被提到)。`prism.css`通常提供了丰富的样式选择。