代码块高亮可复制显示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 相关文章推荐
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
微信小程序之picker日期和时间选择器
Feb 09 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
vue图片加载失败时用默认图片替换的方法
Aug 29 Javascript
Vue中错误图片的处理的实现代码
Nov 07 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
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
php创建桌面快捷方式实现方法
2015/12/31 PHP
PHP培训要多少钱
2017/06/06 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
javascript 闭包疑问
2010/12/30 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
使用JavaScript获取Request中参数的值方法
2016/09/27 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
深入浅析Vue中的Prop
2018/06/10 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
详解在Python中处理异常的教程
2015/05/24 Python
Java分治归并排序算法实例详解
2017/12/12 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
python 贪心算法的实现
2020/09/18 Python
Python调用高德API实现批量地址转经纬度并写入表格的功能
2021/01/12 Python
橄榄树药房:OLIVEDA
2019/09/01 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
腾讯广告词
2014/03/19 职场文书
小学毕业演讲稿
2014/04/25 职场文书
离婚协议书格式
2015/01/26 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
小学少先队活动总结
2015/05/08 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python