代码块高亮可复制显示js插件highlight.js+clipboard.js整合


Posted in Javascript onFebruary 15, 2021

主要从两个方面入手了:

1.高亮显示/换行

2.复制代码按钮

这两方面都有现成的插件。

代码高亮插件——highlight.js

1.下载highlight的js文件。

https://highlightjs.org/

点击get version按钮进入语言选择

代码块高亮可复制显示js插件highlight.js+clipboard.js整合

勾选常用语言,通常common就足够用了。

代码块高亮可复制显示js插件highlight.js+clipboard.js整合

点击download,下载,解压,里面会有js文件和css文件。

js文件决定哪些部分高亮,css决定代码颜色

2.在解压后的文件里找到一个highlight.pack.js文件,在使用时导入这个js文件。

<script src="js/jquery-3.1.1.js"></script> 
<script src="js/highlight.pack.js"></script>

3.打开里面的styles文件,里面有很多的css文件。这些文件可以更改你的展示代码的css样式,包括高亮的颜色和背景色(主题色)。

在使用时想使用那种样式只需要导入这个样式的css文件即可。看不懂这些英文都代表的什么样式?这个网址有各个css文件的效果展示:https://highlightjs.org/static/demo/

这里我选择了一个dark.css文件:

<link rel="stylesheet" type="text/css" href="css/dark.css" rel="external nofollow" />

导入js文件和css文件后然后就可以使用了。

在使用时,一定要将你要展示的代码包在<pre><code></code></pre>标签里!!!

如果你的代码里包含标签,记得将标签的"<"换成"<",把">"换成">"

复制插件——clipboard.js

        一开始想直接使用execCommand实现复制,代码如下。结果复制到的内容没有换行空格等相关的格式,且有兼容性问题,在找了大量插件的过程中采用了现成的复制插件clipboard.js,能够较方便快捷的实现功能。

<script type="text/javascript">
function copyLink(){
var e = document.getElementById("copy");
e.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("复制链接成功!");
}
</script>

clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能。

使用过程中前端浏览器提示了 Clipboard is not defined

一开始以为是未定义或者源码错误,找了半天发现是引入js文件时路径有错误(今后在使用插件过程中如果有未定义的问题,一定要F12调试看一下有没有404错误)

1. 下载 clipboard.js。clipboard.js 下载地址: https://github.com/zenorocha/clipboard.js

2.引入插件

下载下来的文件clipboard.js-master\clipboard.js-master\demo中可以看到示例,可直接使用

以下是复制id=copyCode 的div使用实例:

1)引入js文件

<script src="${ctx }/styles/js/clipboard.min.js" type="text/javascript" ></script>

2)实例化clipboard对象

<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
   console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>

3)定义复制的按钮跟内容(注:此处需要给触发复制时间的按钮添加两个属性,data-clipboard-action 及 data-clipboard-target,data-clipboard-target的属性值为目标文本的 id 值)

<div id="copyCode">hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyCode">Copy</button>

data-clipboard-target 值也可以是标签,但是如果有多个标签,会失效,注意。

两个插件使用过程中没有冲突,可以较好糅合。

Javascript 相关文章推荐
JavaScript 脚本将当地时间转换成其它时区
Mar 19 Javascript
JavaScript让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
js变换显示图片的实例
Apr 16 Javascript
Android中的jQuery:AQuery简介
May 06 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 #Javascript
如何在 Vue 中使用 JSX
Feb 14 #Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 #Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 #Vue.js
详解ES6实现类的私有变量的几种写法
Feb 10 #Javascript
微信小程序实现点赞业务
Feb 10 #Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
输入密码检测大写是否锁定js实现代码
2012/12/03 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
java中String类型变量的赋值问题介绍
2016/03/23 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
js回调函数仿360开机
2019/12/26 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
详解python eval函数的妙用
2017/11/16 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
Django 对IP访问频率进行限制的例子
2019/08/30 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
Python如何使用input函数获取输入
2020/08/06 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
医学生个人求职信范文
2014/02/07 职场文书
党校个人总结
2015/03/04 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
李强优秀员工观后感
2015/06/16 职场文书
结婚喜宴祝酒词
2015/08/10 职场文书