在 React 中使用 highlight.js 和 Clipboard.js 实现代码块和复制功能

参考链接:https://blog.csdn.net/huangjuan0229/article/details/130319050

在前端开发中,代码块高亮和复制功能是十分常见的需求。而在 React 中,常用的代码高亮库是 highlight.js,常用的复制库是 Clipboard.js。本篇文章将介绍如何在 React 中使用这两个库,实现代码高亮和复制功能。

安装 highlight.js 和 Clipboard.js

首先,在我们的 React 项目中安装 highlight.js 和 Clipboard.js:

npm install highlight.js clipboard --save

注意:
这里的库是highlight.js,不是highlight,博主就因为npm了highlight踩了一些坑,小伙伴们注意一下

安装完成后,我们就可以在 React 中使用这两个库了。
可以在package.json中查看
在这里插入图片描述

配置 highlight.js 支持的语言

highlight.js 支持很多种语言的代码高亮,我们需要配置支持的语言。在本例中,我们只演示部分语言的高亮,可根据自己的需要进行配置。我们创建一个 src/highlight.js 文件:

import hljs from 'highlight.js/lib/core';
// 导入需要的语言高亮
import javascript from 'highlight.js/lib/languages/javascript';
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('javascript', javascript);
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/dark.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>
  );
}

在这个组件中,我们使用了 useRefuseEffect 钩子,分别保存了代码块的 DOM 对象和复制按钮的 Clipboard 对象。在 useEffect 中,我们使用 highlight.js 对代码块进行了高亮,并创建了 Clipboard 实例,监听了复制成功事件。当点击复制按钮后,会将代码块的内容复制到剪贴板中,并在按钮上显示“已复制”,2 秒后消失。最后,我们将代码块和复制按钮显示在了页面上。

使用 CodeBlock 组件

import React from 'react';
import CodeBlock from '@/components/CodeBlock';
 
export default function BlogPost() {
  const code = `
    import React from 'react';
import CodeBlock from '@/components/CodeBlock';
 
export default function BlogPost() {
  const code = '111';
 
  return (
    <div>
      <CodeBlock language="javascript" code={code} />
    </div>
  );
}
  `;
 
  return (
    <div>
      <CodeBlock language="javascript" code={code} />
    </div>
  );
}

效果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/21445.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

kicad学习笔记6:kicad启动及其grid参数设置和修改

1。kicad启动&#xff1a; single_top.cpp 启动函数&#xff1a; 1。 IMPLEMENT_APP( APP_SINGLE_TOP )2。 PGM_SINGLE_TOP::OnPgmInit()3。 PGM_BASE::InitPgm2。kicad参数 grid参数定义&#xff1a; struct GRID_SETTINGS {bool axes_enabled;std::vector<wxString&…

在阿里做了6年软件测试,4月无情被辞,想给划水的兄弟提个醒

先简单交代一下背景吧&#xff0c;某不知名 985 的本硕&#xff0c;17 年毕业加入阿里&#xff0c;以“人员优化”的名义无情被裁员&#xff0c;之后跳槽到了有赞&#xff0c;一直从事软件测试的工作。之前没有实习经历&#xff0c;算是6年的工作经验吧。 这6年之间完成了一次…

nacos注册中心源码分析二之服务发现

nacos服务发现 服务发现是客户端发起负载均衡(feign)调用接口的时候内部第一次调用nacos服务端接口的时候去调用的 后续调用基本上都是从客户端的缓存列表里边去取&#xff0c;拿不到才会向服务端发起调用 如果想看这一块代码可以看下ribbion源码分析ribbon源码分析 上一篇&am…

MySQL进阶篇(三)

七.MySQL管理 7.1 系统数据库 Mysql数据库安装完成后&#xff0c;自带了一下四个数据库&#xff0c;具体作用如下&#xff1a; 7.2 常用工具 7.2.1 mysql 该mysql不是指mysql服务&#xff0c;而是指mysql的客户端工具。 -e选项可以在Mysql客户端执行SQL语句&#xff0c;而…

工业互联网UWB定位系统源码,支持自定义开发

工厂人员定位系统&#xff0c;采用UWB定位技术&#xff0c;通过在厂区内部署一定数量的定位基站&#xff0c;以及为人员、车辆、物资佩戴标签卡的形式&#xff0c;实时获取人员精确位置&#xff0c;精度高达10cm。 文末获取联系 工厂人员定位系统可实现物资/车辆实时定位&#…

消息队列:RabbitMQ

文章目录 消息队列&#xff08;RabbitMQ&#xff09;概念优势技术亮点可靠性灵活的路由集群联合高可用的队列多协议广泛的客户端可视化管理工具追踪插件系统 原理&#xff1a;AMQP 0-9-1 模型简介 消息队列&#xff08;RabbitMQ&#xff09; 概念 一种异步通信中间件 优势 消…

2023年服务器数据保护的详细指南

​  无论您经营的是小型个人博客还是日常流量很高的大型企业电子商务网站&#xff0c;安全性都是每个人都关心的问题。虽然粗略的第三方有时间和资源来利用他们在您的系统中发现的任何弱点&#xff0c;但您也可以采取其他措施来提高服务器的安全性并阻止它们。以下是您可以采…

一文理解Kafka

概述 Kafka是一个基于Zookeeper的分布式消息中间件&#xff0c;支持消息分区&#xff0c;提供发布和订阅功能。使用Scala编写&#xff0c;主要特点是可水平扩展&#xff0c;高吞吐率以及高并发。 常见的使用场景&#xff1a; 企业级别活动数据和运营数据的消息传递&am…

Linux高级(shell)

文章目录 一、shell概述Linux 提供的 Shell 解析器有bash 和 sh 的关系Centos 默认的解析器是 bash 二、shell脚本入门脚本格式第一个shell脚本&#xff1a;helloworld.sh 三、变量系统预定义变量自定义变量特殊变量 四、删除变量五、运算符六、条件判断七、流程控制if判断case…

教你精通Java语法之第十四章、枚举

目录 一、背景及定义 二、使用 2.1switch语句 2.2常用方法 三、枚举优点缺点 四、枚举和反射 4.1枚举是否可以通过反射&#xff0c;拿到实例对象呢&#xff1f; 五、总结 六、面试问题 一、背景及定义 枚举是在JDK1.5以后引入的。主要用途是&#xff1a;将一组常量组织…

Vue--》深入理解 Vue 3 导航守卫,掌握前端路由的灵魂技能!

目录 vue3导航守卫讲解与使用 element-ui的安装与使用 配置路由和设置路径别名 设置登录页面并实现规则跳转 设置导航前置守卫 设置导航后置守卫 其他路由相关操作 vue3导航守卫讲解与使用 导航守卫是在 Vue Router 中提供的一种功能&#xff0c;它允许你在切换路由之前…

NineData:高效高质量的Redis可视化管理工具

Redis 是一个内存数据结构存储系统&#xff0c;它被广泛用于缓存、队列、实时分析等多种应用场景中&#xff0c;目前已经成为 Key-value 数据存储系统中的佼佼者&#xff0c;根据 DB-Engine 网站提供的最新数据&#xff0c;Redis 在 Key-value stores 类别中排名第一&#xff0…

SpringCloud-网关 Gateway

网关Gateway 一、网关初识二、网关的使用1.创建项目并引入依赖2.编写网关配置3.启动服务并测试 三.查看网关路由规则列表四.路由服务的负载均衡五.断言和过滤1.断言Predicate1.1.The Path Route Predicate Factory(路径断言工厂&#xff09;1.2.The After Route Predicate Fact…

大模型训练数据多样性的重要性

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

华为云——代码托管的使用

一、打开前后端项目 登录华为云&#xff0c;点击页面右上角的用户名——点击个人设置 2.点击代码托管的HTTPS密码管理&#xff0c;设置自己的密码 3.回到代码仓库&#xff0c;复制HTTP地址 4.打开GitHubDesktop&#xff0c;点击左上角进行仓库克隆 &#xff08;我这里已经cl…

声音合成——Foley Sound——DECASE项目——多模态智能感知与应用——论文翻译

文章目录 概述论文翻译CONDITIONAL SOUND GENERATION USING NEURAL DISCRETE TIME-FREQUENCY REPRESENTATION LEARNINGAbstractSampleRNN是啥&#xff1f; Introduction个人总结&#xff08;省流&#xff09;补充个人感想 Approach2.1 Discrete time-frequency省流总结2.1.1 Mu…

分布式系统原理

高可用是指系统无中断的执行功能的能力&#xff0c;代表了系统的可用程度&#xff0c;是进行系统设计时必须要遵守的准则之一。 而高可用的实现方案&#xff0c;无外乎就是冗余&#xff0c;就存储的高可用而言&#xff0c;问题不在于如何进行数据备份&#xff0c;而在于如何规避…

【Lychee图床】本地电脑搭建私人图床,公网远程访问

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 转发自CSDN风浪越大%鱼越贵的文章&#xff1a;Lychee图床 - 本地配置属于自己的相册管理系统并远…

国潮还能怎么玩?小红书用户画像速看!

所谓“国潮”&#xff0c;概括来说就是“国风潮流”。主要有两层含义&#xff1a;其一&#xff0c;有中国文化和传统的基因&#xff1b;其二&#xff0c;能将传统文化与时下潮流相融合&#xff0c;使产品更具时尚感。在“国潮”元年之前&#xff0c;“国潮”大多指狭义上的特定…

【开发者指南】如何在MyEclipse中编辑HTML或JSP文件?(一)

MyEclipse v2022.1.0正式版下载 如果您有HTML或JSP文件要编辑&#xff0c;这里将介绍如何编辑。查找以下信息&#xff1a; 编辑源代码大纲和属性视图参数页面 该功能在MyEclipse中是可用的。 一、HTML / JSP编辑器 要编辑HTML或JSP文件&#xff0c;请执行以下操作当中的一…