代码块高亮可复制显示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 相关文章推荐
写js时遇到的一些小问题
Dec 06 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
vue登录路由验证的实现
Dec 13 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
JS如何判断对象是否包含某个属性
Aug 29 Javascript
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中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
Javascript倒计时代码
2010/08/12 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
jquery each()源代码
2011/02/14 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
容易造成JavaScript内存泄露几个方面
2014/09/04 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
2015/02/27 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
2015/10/14 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[40:53]完美世界DOTA2联赛PWL S3 Magma vs DLG 第二场 12.18
2020/12/20 DOTA
Python之Web框架Django项目搭建全过程
2017/05/02 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
Django REST framework视图的用法
2019/01/16 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
HTML5单页面手势滑屏切换原理分析
2017/07/10 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
采购部部长岗位职责
2014/02/06 职场文书
考核工作实施方案
2014/03/30 职场文书
银行服务明星推荐材料
2014/05/29 职场文书