提升代码观感！在React中将代码轻松高亮复制

前端

2023-11-01 18:22:15

用 React 打造炫酷代码展示环境：代码高亮和一键复制

身为开发者，你一定希望自己的代码闪耀动人，用户能够轻松复制代码。在 React 中实现代码高亮和一键复制功能，轻而易举！让我们携手 highlight.js 和 Clipboard.js，开启炫酷代码展示之旅。

代码高亮的魅力

highlight.js，代码高亮的王者，为你平淡无奇的代码段注入语法高亮的生命力。它支持众多编程语言，从 JavaScript、HTML、CSS 到 Python、Java、PHP，应有尽有。

只需几行代码，你的代码段便能闪耀动人，让你化身代码艺术家，打造视觉盛宴。

一键复制：轻松无忧

Clipboard.js，代码复制的利器，让复制代码变得如此简单。只需将它添加到你的 React 组件中，用户就能轻松复制代码段，无需繁琐的右键复制。

当然，为了锦上添花，你可以为复制成功添加提示，让用户第一时间收到反馈。

实战演练：动手操作

准备好开启高亮复制之旅了吗？让我们撸起袖子，一起动手吧！

安装利器

第一步，在你的 React 项目中安装 highlight.js 和 Clipboard.js，它们将成为你的代码高亮和复制助手。

引入依赖

在 React 组件中，导入 highlight.js 和 Clipboard.js，让它们成为你代码的得力助手。

代码高亮闪耀登场

通过 highlight.js，你可以将代码段转换成 HTML，赋予它们炫丽的语法高亮。

import Highlight from 'react-highlight';

const Code = ({ code, language }) => {
  return <Highlight language={language}>{code}</Highlight>;
};

代码复制如风驰电掣

使用 Clipboard.js，为你的代码段添加复制功能，让用户轻点鼠标，就能将代码收入囊中。

import ClipboardJS from 'clipboard';

const CopyButton = ({ code }) => {
  const clipboard = new ClipboardJS('.copy-button');

  return <button className="copy-button" data-clipboard-text={code}>复制</button>;
};

细心优化用户体验

别忘了为复制成功添加提示，让用户第一时间收到反馈，提升用户体验。

import Toast from 'react-toast';

const handleCopy = (event) => {
  const code = event.target.dataset.clipboardText;

  clipboard.write(code);
  Toast.success('复制成功！');
};

总结

朋友们，React、highlight.js 和 Clipboard.js 强强联合，打造出令人惊叹的代码展示体验。现在，你拥有了在 React 项目中实现代码高亮和一键复制的能力，助你打造更出色、更用户友好的项目。

常见问题解答