React 实现代码高亮功能

在前端开发中，代码高亮是一个重要的功能，它可以使代码更加易读易懂。在 React 中，我们可以使用第三方库来实现代码高亮。本文将介绍如何使用 react-syntax-highlighter 库来实现代码高亮功能。

安装

首先，我们需要安装 react-syntax-highlighter 库。可以使用 npm 或 yarn 进行安装：

npm install react-syntax-highlighter

或者

yarn add react-syntax-highlighter

使用

安装完成后，我们可以在 React 中使用 react-syntax-highlighter 库来实现代码高亮。下面是一个示例代码：

// www.javascriptcn.com code example
import React from 'react';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const code = `function add(a, b) {
  return a + b;
}`;

function App() {
  return (
    <SyntaxHighlighter language="javascript" style={docco}>
      {code}
    </SyntaxHighlighter>
  );
}

export default App;

在上面的代码中，我们首先导入了 react-syntax-highlighter 库，然后定义了一段代码。最后，在 App 组件中使用 SyntaxHighlighter 组件来渲染代码。语言属性指定了代码的语言类型，style 属性指定了代码高亮的样式。

自定义样式

react-syntax-highlighter 库提供了多种代码高亮样式，我们可以根据自己的需要来选择。如果需要自定义样式，可以使用 createGlobalStyle 函数来定义全局样式。下面是一个示例代码：

// www.javascriptcn.com code example
import React from 'react';
import { createGlobalStyle } from 'styled-components';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs';

const code = `function add(a, b) {
  return a + b;
}`;

const GlobalStyle = createGlobalStyle`
  .react-syntax-highlighter-line-number {
    color: #999;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <SyntaxHighlighter language="javascript" style={docco}>
        {code}
      </SyntaxHighlighter>
    </>
  );
}

export default App;

在上面的代码中，我们使用 createGlobalStyle 函数定义了一个全局样式，用来修改行号的颜色。然后在 App 组件中使用 GlobalStyle 组件来应用全局样式。

结语

本文介绍了如何使用 react-syntax-highlighter 库来实现代码高亮功能，并提供了示例代码和自定义样式的方法。希望本文对你有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6783f30f9137010942d12933