代码块高亮可复制显示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 相关文章推荐
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
js实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
js验证上传图片的方法
May 12 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
jQuery实现判断控件是否显示的方法
Jan 11 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
Dec 23 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防注入漏洞过滤函数代码
2012/04/11 PHP
thinkPHP+mysql+ajax实现的仿百度一下即时搜索效果详解
2019/07/15 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
Python实现的飞速中文网小说下载脚本
2015/04/23 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python人民币小写转大写辅助工具
2018/06/20 Python
python去除文件中重复的行实例
2018/06/29 Python
使用 Python 实现简单的 switch/case 语句的方法
2018/09/17 Python
python实现对象列表根据某个属性排序的方法详解
2019/06/11 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
美容院营销方案
2014/03/05 职场文书
工厂车间标语
2014/06/19 职场文书
庆六一宣传标语
2014/10/08 职场文书
总经理年会致辞
2015/07/29 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android