在开发Web应用时，代码高亮和复制功能是非常常见的需求。highlight.js 是一个流行的代码高亮库，而 Clipboard.js 则是一个轻量级的复制到剪贴板的库。本文将介绍如何在React项目中使用这两个库来实现代码高亮和复制功能。
首先，我们需要安装 highlight.js 和 Clipboard.js 这两个库。你可以使用 npm 或 yarn 来安装它们：
计算
安全
数据库
网络和加速
企业服务
npm install highlight.js clipboard
# 或者
yarn add highlight.js clipboard
highlight.js 提供了多种语言的代码高亮支持。我们需要在项目中引入它，并配置需要高亮的语言。
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 选择一个样式主题
// 配置需要高亮的语言
hljs.configure({
languages: ['javascript', 'python', 'html', 'css', 'bash']
});
接下来，我们创建一个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 来对代码进行高亮处理。
现在，我们已经实现了代码高亮，接下来我们使用 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 来监听按钮的点击事件。当用户点击按钮时，代码将被复制到剪贴板。
现在，我们可以在应用中使用 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;
通过以上步骤，我们成功地在React项目中使用了 highlight.js 和 Clipboard.js 实现了代码高亮和复制功能。highlight.js 提供了丰富的代码高亮支持，而 Clipboard.js 则简化了复制到剪贴板的操作。结合这两个库，我们可以轻松地为用户提供更好的代码展示和交互体验。
希望这篇文章对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://juejin.cn/post/7225081591369728037
