本篇内容主要讲解“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> ); }
效果展示