本文實(shí)例講述了CKEditor 4.4.1 添加代碼高亮顯示插件功能。分享給大家供大家參考，具體如下：
隨著CKEditor4.4.1的發(fā)布，以前一直困擾的代碼高亮問題終于完美的得到解決，在CKEditor4.4中官方發(fā)布了Code Snippet這個(gè)代碼片段的插件，終于可以完美的內(nèi)嵌使用代碼高亮了，以前都是使用網(wǎng)友自己開發(fā)的代碼高亮插件。下面就來介紹如何使用Code Snippet這個(gè)代碼高亮插件。本文還介紹了CKEditor中如何安裝Code Snippet插件。
新版本附加信息
Code Snippet簡(jiǎn)介
Code Snippet是CKEditor4.4.1的新插件，主要提供添加代碼片段高亮顯示的功能。另外注意一點(diǎn)的是，Code Snippet只是作為CKEditor的插件，真正實(shí)現(xiàn)代碼高亮的是highlight.js這個(gè)代碼高亮JS庫(kù)。
Code Snippet只是將highlight.js作為默認(rèn)的高亮庫(kù),由于highlight.js已經(jīng)集成在Code Snippet中，所以我們?cè)谑褂肅KEditor時(shí)候是不需要另外再引用highlight.js這個(gè)庫(kù)。（點(diǎn)擊這里查看highlight.js的官方網(wǎng)站）。
以前的CKEditor版本由于沒有比較好的代碼高亮插件，都是自己自定義插件，當(dāng)時(shí)用的是SyntaxHighlighter這個(gè)代碼高亮庫(kù)。大家也可網(wǎng)上搜下SyntaxHighlighter的資料
如何安裝Code Snippet？添加代碼片段高亮插件的具體步驟
添加Code Snippet的方法很簡(jiǎn)單，不過由于版本兼容問題，目前官網(wǎng)上這個(gè)插件對(duì)4.4兼容最好，其他兼容則未進(jìn)行測(cè)試，所以使用這個(gè)插件最好是將CKEditor升級(jí)到4.4.1。
如果已經(jīng)熟悉CKEditor的插件機(jī)制，那么我們只要到官網(wǎng)上將Code Snippet下載下來（下載地址見文章頂部），將里面的整個(gè)文件夾解壓到ckeditor文件夾下的plugins文件夾內(nèi)。
然后設(shè)置下ckeditor的config.js配置文件,將插件添加進(jìn)去即可,代碼如下(這里只設(shè)置了一個(gè)插件屬性，其他屬性可根據(jù)需要設(shè)置)：
CKEDITOR.editorConfig = function (config) { //添加插件，多個(gè)插件用逗號(hào)隔開 config.extraPlugins = 'codesnippet'; //使用zenburn的代碼高亮風(fēng)格樣式 PS:zenburn效果就是黑色背景 //如果不設(shè)置著默認(rèn)風(fēng)格為default config.codeSnippet_theme = 'zenburn';}也可以在編輯器初始化的使用下面代碼添加高亮插件：
CKEDITOR.replace('文本框ID',{extraPlugins: 'codesnippet',codeSnippet_theme: 'zenburn'});這里有一點(diǎn)需要注意，如果按照上面添加插件的步驟而出現(xiàn)下面這兩個(gè)錯(cuò)誤：
這是因?yàn)橄螺d的CKEditor缺少widget和lineutils插件，到官網(wǎng)將這兩個(gè)插件下載下來，只要將這兩個(gè)插件解壓到ckeditor文件夾下的plugins文件夾內(nèi)就可以了。一般是先出現(xiàn)第一個(gè)widget插件無法找到的錯(cuò)誤，添加了widget插件后才會(huì)出現(xiàn)第二個(gè)找不到lineutils插件的錯(cuò)誤，可見Code Snippet需要依靠這兩個(gè)插件。這兩個(gè)插件的下載地址如下：
還有最簡(jiǎn)單的方式，首先打開Code Snippet下載地址，將插件添加到自定義CKEditor編輯器
然后進(jìn)入自定義CKEditor編輯器頁(yè)面，這里可以看到已經(jīng)將代碼高亮插件集成到CKEditor里面了，最后點(diǎn)擊下載就可以了，當(dāng)然這里有很多自定義UI和插件，可以選擇自己需要的插件和喜歡的編輯器界面。
這樣就完美的添加上了代碼片段高亮插件了。
如何讓代碼片段在普通頁(yè)面上顯示高亮？
我們會(huì)發(fā)現(xiàn)，雖然在編輯器中添加的代碼片段有高亮效果，但是將編輯器里的代碼片段放到頁(yè)面中卻沒有高亮的效果。這是因?yàn)榫庉嬈鞯牟寮呀?jīng)默認(rèn)集成了highlight.js這個(gè)代碼高亮庫(kù)，所以我們要在頁(yè)面上顯示高亮就得重新引用和添加highlight.js庫(kù)。
我們先看下編輯器中的高亮代碼：
<pre><code class="language-html"><!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>測(cè)試頁(yè)面</title></head><body><div>代碼片段高亮效果</div></body></html></code></pre>
可以看到 高亮的效果主要是根據(jù)<pre>標(biāo)簽和 <code class="language-html">這兩個(gè)標(biāo)簽來顯示的，其中l(wèi)anguage-html表示的顯示高亮語(yǔ)言為HTML。highlight.js就是根據(jù)這兩個(gè)標(biāo)簽來顯示高亮效果。
我們首先要將highlight.js下載下來（下載地址，可以選擇要高亮的編程語(yǔ)言種類），然后在需要代碼高亮的頁(yè)面添加下面的代碼：
<!--開頭這里的樣式為默認(rèn)的風(fēng)格，可以根據(jù)自己的喜好更換風(fēng)格--><!--我的高亮效果是zenburn--><link rel="stylesheet" href="styles/default.css" rel="external nofollow" ><script src="highlight.pack.js"></script><script>hljs.initHighlightingOnLoad();</script>
要注意更改css樣式和JS的引用地址，地址以自己網(wǎng)站中highlight.js的存放地址為準(zhǔn)。另外高亮庫(kù)默認(rèn)使用的是default.css的高亮風(fēng)格，這里是highlightjs的各種代碼高亮風(fēng)格的顯示效果，大家可以到上面測(cè)試選擇自己喜歡的高亮風(fēng)格：http://highlightjs.org/static/test.html。highlightjs的具體使用方法可以看官網(wǎng)的文檔：http://highlightjs.org/usage/。
到這里就可以完整的將代碼片段進(jìn)行高亮顯示了。
新聞熱點(diǎn)
疑難解答
圖片精選
