React怎么使用highlight.js和Clipboard.js實現代碼高亮復制

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 則簡化了復制到剪貼板的操作。結合這兩個庫，我們可以輕松地為用戶提供更好的代碼展示和交互體驗。

希望這篇文章對你有所幫助！如果你有任何問題或建議，歡迎在評論區留言。