个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
25
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章代码块高亮可复制显示js插件highlight.js+clipboard.js整合由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
主要从两个方面入手了:
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>标签里！！！ 。
如果你的代码里包含标签，记得将标签的"<"换成"<"，把">"换成">" 。
一开始想直接使用execCommand实现复制，代码如下。结果复制到的内容没有换行空格等相关的格式，且有兼容性问题，在找了大量插件的过程中采用了现成的复制插件clipboard.js，能够较方便快捷的实现功能.
|
1
2
3
4
5
6
7
8
|
<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对象 。
|
1
2
3
4
5
6
7
8
9
|
<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 值也可以是标签，但是如果有多个标签，会失效，注意.
两个插件使用过程中没有冲突，可以较好糅合.
原文链接：https://blog.csdn.net/qq_36959300/article/details/86686741 。
最后此篇关于代码块高亮可复制显示js插件highlight.js+clipboard.js整合的文章就讲到这里了,如果你想了解更多关于代码块高亮可复制显示js插件highlight.js+clipboard.js整合的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
25
4
0
我正在寻找一种方法来创建根据价格选择我的产品的过滤器(选择下拉菜单)。 我知道这样的查询是完全可能的: SELECT * FROM products ORDER BY price ASC SELECT
函数参数中或显示尺寸时(高度，宽度)的顺序是否有约定？ 最佳答案 我不知道大量的语言，但我使用过的语言(宽度，高度)。它更适合沿着 (x, y) 坐标线。 关于language-agnostic -
在我的表单中，我让用户输入房间的长度高度和宽度以获得 m2、m3 和瓦特的计算值。但是用户也应该能够直接输入 height 和 m2 来获取值。我尝试了很多语法，但 if else 不能正常工作。我知
我在 Elasticsearch 中创建了一个索引，看起来像 {"amazingdocs":{"aliases":{},"mappings":{"properties":{"Adj Close":{"
我有以下功能，我需要清除数据库中的所有图片列并移动到文件系统。当我一次性完成这一切时，内存太多并且会崩溃。我切换到递归函数并执行 20 次写入和批量操作。 我需要为大约 6 个表执行此操作。我的 Re
我正在编写一个函数来计算 PI 的值，并将其作为 double 值返回。到目前为止，一切都很好。但是一旦函数到达小数点后14位，它就不能再保存了。我假设这是因为 double 有限。我应该怎么做才能继
2020年是中国CDN行业从98年诞生到今天快速发展的第二十四年，相关数据显示，全国感知网速持续上扬，达到了3.29兆/秒，标志着在宽带中国的政策指导下，中国的网速水平正在大步赶上世界发达国家的水平
在 aerospike 集合中，我们有四个 bin userId、adId、timestamp、eventype，主键是 userId:timestamp。在 userId 上创建二级索引以获取特定用
$('#container').highcharts('Map', { title : { text : 'Highmaps basic demo'
有没有办法显示自定义宽度/高度的YouTube视频？ 最佳答案 在YouTube网站上的this link中: You can resize the player by editing the obj
我使用 Highcharts ，我想在 Highcharts 状态下悬停时制作动态不同的颜色。 正如你可以看到不同的颜色，这就是我做的 var usMapChart , data = [] ; va
在所有节点上运行 tpstats 后。我看到很多节点都有大量的 ALL TIME BLOCKED NTR。我们有一个 4 节点集群，NTR ALL TIME BLOCKED 的值为: 节点 1:239
我发现 APC 上存在大量碎片 (>80%)，但实际上性能似乎相当不错。我有 read another post这建议在 wordpress/w3tc 中禁用对象缓存，但我想知道减少碎片是否比首先缓存
对于我的脚本类(class)，我们必须制作更高/更低的游戏。到目前为止，这是我的代码: import random seedVal = int(input("What seed should be u
我发现 APC 上存在大量碎片 (>80%)，但实际上性能似乎相当不错。我有 read another post这建议在 wordpress/w3tc 中禁用对象缓存，但我想知道减少碎片是否比首先缓存
对于我的脚本类(class)，我们必须制作更高/更低的游戏。到目前为止，这是我的代码: import random seedVal = int(input("What seed should be u
我已经 seen >2 字节的 unicode 代码点，如 U+10000 可以成对编写，如 \uD800\uDC00。它们似乎以半字节 d 开头，但我只注意到了这一点。 这个 split Actio
有人可以帮我理解为什么我的饼图百分比计算不正确吗？看截图: 根据我的计算，如 RHS 上所示，支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我阅读了有关该问题的所有答案，但我还没有找到任何解决方案。 我有一个应用程序，由我的 api 服务器提供。 Wildfly 8.1 和 Mysql 5.6。当查看时间到来时(Wildfly 服务器连接
我正在用选定的项目创建圆形导航。当用户单击任何项目时，它将移动到定义的特定点。一切都很好，除了当你继续点击项目时，当动画表现不同并且项目在 360 度圆中移动并且它被重置直到你重复场景时，我希望它
我是一名优秀的程序员,十分优秀！