代碼塊高亮可復制顯示js插件highlight.js+clipboard.js整合

Posted on by

主要從兩個方面入手瞭：

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%20}/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 值也可以是標簽，但是如果有多個標簽，會失效，註意。

兩個插件使用過程中沒有沖突，可以較好糅合。

推薦閱讀：