使用highlightjs改我们给高亮代码之后,还有一个美化的方法,给高亮代码加上复制按钮,方便复制和使用。1、下载插件:highlightjs-copy-button.js2、引入下载好的文件:(注:前提先引入了highlightjs)3、实例化//
使用highlightjs改我们给高亮代码之后,还有一个美化的方法,给高亮代码加上复制按钮,方便复制和使用。
1、下载插件:highlightjs-copy-button.js
2、引入下载好的文件:(注:前提先引入了highlightjs)
<script src="highlightjs-copy-button.min.js"></script>
3、实例化
// 显示copy代码复制按钮
hljs.highlightAll();
hljs.initCopyButtonOnLoad();
这样鼠标悬停到代码出,就会出现复制按钮,和复制成功按钮。我们可以打开highlightjs-copy-button.js文件,把默认的英文改为中文
var BLOCK_NAME = 'hljs-button',
LN_CLASS = 'hljs-ln-code',
TEXT_COPY = '复制',
TEXT_ERROR = 'Error',
TEXT_COPIED = '复制成功';
沃梦达教程
本文标题为:下载highlightjs-copy-button.js给网站代码加上copy复制按钮
猜你喜欢
- vue keep-alive 2023-10-08
- 1 Vue - 简介 2023-10-08
- jsPlumb+vue创建字段映射关系 2023-10-08
- ajax实现输入提示效果 2023-02-14
- JS实现左侧菜单工具栏 2022-08-31
- 关于 html:如何从 css 表中删除边距和填充 2022-09-21
- layui数据表格以及传数据方式 2022-12-13
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08
- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15