主要從兩個(gè)方面入手了：

1.高亮顯示/換行

2.復(fù)制代碼按鈕

這兩方面都有現(xiàn)成的插件。

代碼高亮插件——highlight.js

1.下載highlight的js文件。

https://highlightjs.org/

點(diǎn)擊get version按鈕進(jìn)入語(yǔ)言選擇

勾選常用語(yǔ)言，通常common就足夠用了。

點(diǎn)擊download，下載，解壓，里面會(huì)有js文件和css文件。

js文件決定哪些部分高亮，css決定代碼顏色

2.在解壓后的文件里找到一個(gè)highlight.pack.js文件，在使用時(shí)導(dǎo)入這個(gè)js文件。

<script src="js/jquery-3.1.1.js"></script> 
<script src="js/highlight.pack.js"></script>

3.打開(kāi)里面的styles文件，里面有很多的css文件。這些文件可以更改你的展示代碼的css樣式，包括高亮的顏色和背景色(主題色)。

在使用時(shí)想使用那種樣式只需要導(dǎo)入這個(gè)樣式的css文件即可?？床欢@些英文都代表的什么樣式？這個(gè)網(wǎng)址有各個(gè)css文件的效果展示：https://highlightjs.org/static/demo/

這里我選擇了一個(gè)dark.css文件：

<link rel="stylesheet" type="text/css" href="css/dark.css" rel="external nofollow" />

導(dǎo)入js文件和css文件后然后就可以使用了。

在使用時(shí)，一定要將你要展示的代碼包在<pre><code></code></pre>標(biāo)簽里?。?！

如果你的代碼里包含標(biāo)簽，記得將標(biāo)簽的"<"換成"&lt"，把">"換成"&gt"

復(fù)制插件——clipboard.js

        一開(kāi)始想直接使用execCommand實(shí)現(xiàn)復(fù)制，代碼如下。結(jié)果復(fù)制到的內(nèi)容沒(méi)有換行空格等相關(guān)的格式，且有兼容性問(wèn)題，在找了大量插件的過(guò)程中采用了現(xiàn)成的復(fù)制插件clipboard.js，能夠較方便快捷的實(shí)現(xiàn)功能。

<script type="text/javascript">
function copyLink(){
var e = document.getElementById("copy");
e.select(); // 選擇對(duì)象
document.execCommand("Copy"); // 執(zhí)行瀏覽器復(fù)制命令
alert("復(fù)制鏈接成功！");
}
</script>

clipboard.js 可以實(shí)現(xiàn)純 JS 的從瀏覽器復(fù)制文本到系統(tǒng)剪貼板的功能。

使用過(guò)程中前端瀏覽器提示了 Clipboard is not defined

一開(kāi)始以為是未定義或者源碼錯(cuò)誤，找了半天發(fā)現(xiàn)是引入js文件時(shí)路徑有錯(cuò)誤（今后在使用插件過(guò)程中如果有未定義的問(wèn)題，一定要F12調(diào)試看一下有沒(méi)有404錯(cuò)誤）

1. 下載 clipboard.js。clipboard.js 下載地址： https://github.com/zenorocha/clipboard.js

2.引入插件

下載下來(lái)的文件clipboard.js-master\clipboard.js-master\demo中可以看到示例，可直接使用

以下是復(fù)制id=copyCode 的div使用實(shí)例：

1）引入js文件

<script src="${ctx }/styles/js/clipboard.min.js" type="text/javascript" ></script>

2）實(shí)例化clipboard對(duì)象

<script>
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
   console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>

3）定義復(fù)制的按鈕跟內(nèi)容（注：此處需要給觸發(fā)復(fù)制時(shí)間的按鈕添加兩個(gè)屬性，data-clipboard-action 及 data-clipboard-target，data-clipboard-target的屬性值為目標(biāo)文本的 id 值）

<div id="copyCode">hello</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyCode">Copy</button>

data-clipboard-target 值也可以是標(biāo)簽，但是如果有多個(gè)標(biāo)簽，會(huì)失效，注意。

兩個(gè)插件使用過(guò)程中沒(méi)有沖突，可以較好糅合。

最新評(píng)論