主要從兩個方面入手了：

1.高亮顯示/換行

2.復制代碼按鈕

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

代碼高亮插件——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文件即可。看不懂這些英文都代表的什么樣式？這個網(wǎng)址有各個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>標簽里！?。?/p>

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

復制插件——clipboard.js

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

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

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

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

一開始以為是未定義或者源碼錯誤，找了半天發(fā)現(xiàn)是引入js文件時路徑有錯誤（今后在使用插件過程中如果有未定義的問題，一定要F12調(diào)試看一下有沒有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）定義復制的按鈕跟內(nèi)容（注：此處需要給觸發(fā)復制時間的按鈕添加兩個屬性，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 值也可以是標簽，但是如果有多個標簽，會失效，注意。

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

最新評論