代码块高亮可复制显示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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 Javascript
Javascript 实用小技巧
Apr 07 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
JS实现含有中文字符串的友好截取功能分析
Mar 13 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
js图片查看器插件用法示例
Jun 22 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
Sep 02 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类声明和php类使用方法示例分享
2014/03/29 PHP
PHP 错误处理机制
2015/07/06 PHP
PHP格式化MYSQL返回float类型的方法
2016/03/30 PHP
javascript arguments使用示例
2014/12/16 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
python任务调度实例分析
2015/05/19 Python
Python三级目录展示的实现方法
2016/09/28 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python range与enumerate函数区别解析
2020/02/28 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
生物科学专业个人求职信范文
2013/12/07 职场文书
工作作风承诺书
2014/08/30 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
技术股东合作协议书
2014/12/02 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
努力学习保证书
2015/02/26 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
详解MySQL中的主键与事务
2021/05/27 MySQL
python 判断文件或文件夹是否存在
2022/03/18 Python