您的位置：首页 > 编程技术 > js  >  代码块高亮可复制显示js插件highlight.js+clipboard.js整合

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

 更新时间：2021年2月17日 15:00  点击：2581

主要从两个方面入手了：

1.高亮显示/换行

2.复制代码按钮

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

代码高亮插件——highlight.js

1.下载highlight的js文件。

https://highlightjs.org/

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

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

点击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>标签里！！！

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

复制插件——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 值也可以是标签，但是如果有多个标签，会失效，注意。

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

[!--infotagslink--]

相关文章

  • MySQL快速复制数据库数据表的方法

    某些时候，例如为了搭建一个测试环境，或者克隆一个网站，需要复制一个已存在的mysql数据库。使用以下方法，可以非常简单地实现。假设已经存在的数据库名字叫db1，想要复制一份，命名为newdb。步骤如下：1. 首先创建新的数据库newd...2015-10-21

  • C# 复制与删除文件的实现方法

    这篇文章主要介绍了C# 复制与删除文件的实现方法的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下...2020-06-25

  • JavaScript深度复制（deep clone）的实现方法

    本文给大家介绍JavaScript深度复制（deep clone）的实现方法，涉及到js深度复制相关知识，本文介绍的非常详细，特此分享脚本之家平台供大家参考...2016-02-21

  • percona-toolkit对MySQL的复制和监控类操作教程

    复制类工具 1. pt-heartbeat 功能介绍： 监控mysql复制延迟 用法介绍： pt-heartbeat [OPTION...] [DSN] --update|--monitor|--check|--stop 测量复制落后主mysql或者主PostgreSQL多少时间，你可以使用这个脚本去更新主或...2015-11-24

  • C#中数组初始化与数组元素复制的方法

    这篇文章主要介绍了C#中数组初始化与数组元素复制的方法,涉及C#中数组的创建、初始化及使用Array.Copy方法复制数组元素的技巧,需要的朋友可以参考下...2020-06-25

  • mysql(master/slave)主从复制原理及配置图文详解

    这篇文章主要介绍了mysql(masterslave)主从复制原理及配置图文详解,以前脚本之家小编发过相关的内容，但这么好的非常少见特分享一下,需要的朋友可以参考下...2016-06-12

  • step by step配置mysql复制的具体方法

    采用全库复制的方案，方便管理mysql 5.5 + rhel5.810.4.11.12 master10.4.11.13 slave---Master端设置1， 创建复制帐号，需要复制和slave权限mysql> GRANT REPLICATION SLAVE, REPLICATION CLIENT ON *.* TO repl@'10....2013-10-04

  • js实现复制粘贴的两种方法

    这篇文章主要为大家详细介绍了js实现的两种方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-12-04

  • shell脚本批量复制及执行命令的示例详解

    这篇文章主要介绍了批量复制及执行命令shell脚本，本文通过列举几个示例给大家详细介绍，对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11

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

    最近有个需求是将jsp页面上的某一段代码块格式化成类似CSDN的代码块的样式，而且很多平台都使用了这样的功能，下面就为大家简单分享一下...2021-02-17

  • js实现点击复制当前文本到剪贴板功能（兼容所有浏览器）

    这篇文章主要介绍了js实现点击复制当前文本到剪贴板功能，兼容所有浏览器，感兴趣的小伙伴们可以参考一下...2015-12-24

  • 浅谈C#各种数组直接的数据复制/转换

    下面小编就为大家带来一篇浅谈C#各种数组直接的数据复制/转换。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-06-25

  • C语言文件复制实例详解

    这篇文章主要介绍了C语言文件复制实例详解的相关资料,需要的朋友可以参考下...2020-04-25

  • 深入理解JavaScript中的对象复制(Object Clone)

    下面小编就为大家带来一篇深入理解JavaScript中的对象复制(Object Clone)。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20

  • Python使用openpyxl复制整张sheet

    这篇文章主要介绍了Python使用openpyxl复制整张sheet，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-19

  • Vue.js之slot深度复制详解

    这篇文章主要介绍了Vue.js之slot深度复制的相关资料，文中介绍的很详细，对大家具有一定的参考价值，需要的朋友们来一起看看吧。...2017-03-13

  • C#实现复制数据库 C#将A数据库数据转到B数据库

    这篇文章主要为大家详细介绍了C#复制数据库，将数据库数据转到另一个数据库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-06-25

  • C++中对象的赋值与复制操作详细解析

    对象之间的赋值也是通过赋值运算符“=”进行的。本来赋值运算符“=”只能用来对单个的变量赋值，现在被扩展为两个同类对象之间的赋值，这是通过对赋值运算符的重载实现的...2020-04-25

  • MySQL的主从复制步骤详解及常见错误解决方法

    这篇文章主要介绍了MySQL的主从复制步骤详解及常见错误解决方法,文中主张同步时跳过临时错误,并对Slave_IO_Running: No错误的解决给出了方案,需要的朋友可以参考下...2016-03-02

  • SQL Server中的数据复制到的Access中的函数

    SQL Server中的数据复制到的Access中，表的结构相同 不要提用openrowset，因为Access文件和SQL Server不在一台机器上...2020-04-25