React怎么使用highlight.js和Clipboard.js实现代码高亮复制

在开发Web应用时，代码高亮和复制功能是非常常见的需求。highlight.js 是一个流行的代码高亮库，而 Clipboard.js 则是一个轻量级的复制到剪贴板的库。本文将介绍如何在React项目中使用这两个库来实现代码高亮和复制功能。

1. 安装依赖

首先，我们需要安装 highlight.js 和 Clipboard.js 这两个库。你可以使用 npm 或 yarn 来安装它们：

npm install highlight.js clipboard
# 或者
yarn add highlight.js clipboard

2. 引入highlight.js

highlight.js 提供了多种语言的代码高亮支持。我们需要在项目中引入它，并配置需要高亮的语言。

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 选择一个样式主题

// 配置需要高亮的语言
hljs.configure({
  languages: ['javascript', 'python', 'html', 'css', 'bash']
});

3. 创建代码高亮组件

接下来，我们创建一个React组件来展示代码，并使用 highlight.js 进行高亮处理。

import React, { useEffect, useRef } from 'react';

const CodeBlock = ({ language, code }) => {
  const codeRef = useRef(null);

  useEffect(() => {
    if (codeRef.current) {
      hljs.highlightBlock(codeRef.current);
    }
  }, [code]);

  return (
    <pre>
      <code ref={codeRef} className={language}>
        {code}
      </code>
    </pre>
  );
};

export default CodeBlock;

在这个组件中，我们使用了 useRef 来获取代码块的DOM元素，并在 useEffect 中调用 hljs.highlightBlock 来对代码进行高亮处理。

4. 添加复制功能

现在，我们已经实现了代码高亮，接下来我们使用 Clipboard.js 来添加复制功能。

import React, { useEffect, useRef } from 'react';
import ClipboardJS from 'clipboard';

const CodeBlock = ({ language, code }) => {
  const codeRef = useRef(null);
  const copyButtonRef = useRef(null);

  useEffect(() => {
    if (codeRef.current) {
      hljs.highlightBlock(codeRef.current);
    }

    const clipboard = new ClipboardJS(copyButtonRef.current, {
      text: () => code
    });

    return () => {
      clipboard.destroy();
    };
  }, [code]);

  return (
    <div>
      <pre>
        <code ref={codeRef} className={language}>
          {code}
        </code>
      </pre>
      <button ref={copyButtonRef}>复制代码</button>
    </div>
  );
};

export default CodeBlock;

在这个组件中，我们创建了一个按钮，并使用 ClipboardJS 来监听按钮的点击事件。当用户点击按钮时，代码将被复制到剪贴板。

5. 使用组件

现在，我们可以在应用中使用 CodeBlock 组件来展示高亮的代码，并提供复制功能。

import React from 'react';
import CodeBlock from './CodeBlock';

const App = () => {
  const code = `
    function helloWorld() {
      console.log('Hello, world!');
    }
  `;

  return (
    <div>
      <h1>代码高亮与复制示例</h1>
      <CodeBlock language="javascript" code={code} />
    </div>
  );
};

export default App;

6. 总结

通过以上步骤，我们成功地在React项目中使用了 highlight.js 和 Clipboard.js 实现了代码高亮和复制功能。highlight.js 提供了丰富的代码高亮支持，而 Clipboard.js 则简化了复制到剪贴板的操作。结合这两个库，我们可以轻松地为用户提供更好的代码展示和交互体验。

希望这篇文章对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。