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

本篇內容主要講解“React怎么使用highlight.js和Clipboard.js實現代碼高亮復制”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React怎么使用highlight.js和Clipboard.js實現代碼高亮復制”吧!

安裝 highlight.js 和 Clipboard.js

首先，在我們的 React 項目中安裝 highlight.js 和 Clipboard.js：

npm install highlight.js clipboard --save

安裝完成后，我們就可以在 React 中使用這兩個庫了。

配置 highlight.js 支持的語言

highlight.js 支持很多種語言的代碼高亮，我們需要配置支持的語言。在本例中，我們只演示部分語言的高亮，可根據自己的需要進行配置。我們創建一個 src/highlight.js 文件：

import hljs from 'highlight.js/lib/core';
// 導入需要的語言高亮
import java from 'highlight.js/lib/languages/java';
import csharp from 'highlight.js/lib/languages/csharp';
import php from 'highlight.js/lib/languages/php';
import python from 'highlight.js/lib/languages/python';
import objectivec from 'highlight.js/lib/languages/objectivec';
import bash from 'highlight.js/lib/languages/bash';
hljs.registerLanguage('java', java);
hljs.registerLanguage('csharp', csharp);
hljs.registerLanguage('php', php);
hljs.registerLanguage('python', python);
hljs.registerLanguage('objectivec', objectivec);
hljs.registerLanguage('bash', bash);
export default hljs;

在這個文件中，我們導入了需要使用的語言高亮，并注冊到了 highlight.js 中，最后導出了 hljs 對象。這樣，我們就可以在 React 中方便地使用 highlight.js 了。

創建 CodeBlock 組件

我們創建一個 src/components/CodeBlock/index.js 文件，實現 CodeBlock 組件：

import React, { useEffect, useRef, useState } from 'react';
import hljs from '../../highlight';
import Clipboard from 'clipboard';
import 'highlight.js/styles/default.css';
export default function CodeBlock({ language, code }) {
  const preRef = useRef(null);
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    if (preRef.current) {
      hljs.highlightBlock(preRef.current);
      // 創建 clipboard 實例并保存到變量中
      const clipboard = new Clipboard(`#${language}copy_btn`, {
        text: () => code,
      });
      // 監聽復制成功事件
      clipboard.on('success', () => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
      });
      // 銷毀 clipboard 實例
      return () => {
        clipboard.destroy();
      };
    }
  }, [code]);
  return (
    <div className="code-block" style={{ position: 'relative', marginTop: 8 }}>
      <pre>
        <code id={language} ref={preRef} className={language}>
          [code]
        </code>
      </pre>
      <button id={`${language}copy_btn`} style={{ position: 'absolute', top: 4, right: 4, lineHeight: '14px' }} className="code-block__button" data-clipboard-target={`#${language}`} disabled={!preRef.current}>
        {copied ? '已復制' : '復制'}
      </button>
    </div>
  );
}

在這個組件中，我們使用了 useRef 和 useEffect 鉤子，分別保存了代碼塊的 DOM 對象和復制按鈕的 Clipboard 對象。在 useEffect 中，我們使用 highlight.js 對代碼塊進行了高亮，并創建了 Clipboard 實例，監聽了復制成功事件。當點擊復制按鈕后，會將代碼塊的內容復制到剪貼板中，并在按鈕上顯示“已復制”，2 秒后消失。最后，我們將代碼塊和復制按鈕顯示在了頁面上。

使用 CodeBlock 組件

import React from 'react';
import CodeBlock from '../components/CodeBlock';
export default function BlogPost() {
  const code = `
    public static void main(String[] args) {
      System.out.println("Hello, World!");
    }
  `;
  return (
    <div>
      <h3>這是一篇博客文章</h3>
      <p>下面是一段 Java 代碼：</p>
      <CodeBlock language="java" code=[code] />
    </div>
  );
}

效果展示

到此，相信大家對“React怎么使用highlight.js和Clipboard.js實現代碼高亮復制”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！