CKEditor 4.4.1 添加代碼高亮顯示插件功能教程【使用官方推薦Code Snippet插件】

本文實例講述了CKEditor 4.4.1 添加代碼高亮顯示插件功能。分享給大家供大家參考，具體如下：

隨著CKEditor4.4.1的發(fā)布，以前一直困擾的代碼高亮問題終于完美的得到解決，在CKEditor4.4中官方發(fā)布了Code Snippet這個代碼片段的插件，終于可以完美的內(nèi)嵌使用代碼高亮了，以前都是使用網(wǎng)友自己開發(fā)的代碼高亮插件。下面就來介紹如何使用Code Snippet這個代碼高亮插件。本文還介紹了CKEditor中如何安裝Code Snippet插件。

新版本附加信息

1. CKEditor 4.4的更新詳情：http://ckeditor.com/whatsnew
2. CKEditor 官方對代碼高亮插件Code Snippet的文檔：https://docs.ckeditor.com/#!/guide/dev_codesnippet
3. Code Snippet的下載地址：http://ckeditor.com/addon/codesnippet
   

Code Snippet簡介

Code Snippet是CKEditor4.4.1的新插件，主要提供添加代碼片段高亮顯示的功能。另外注意一點的是，Code Snippet只是作為CKEditor的插件，真正實現(xiàn)代碼高亮的是highlight.js這個代碼高亮JS庫。

Code Snippet只是將highlight.js作為默認(rèn)的高亮庫,由于highlight.js已經(jīng)集成在Code Snippet中，所以我們在使用CKEditor時候是不需要另外再引用highlight.js這個庫。（點擊這里查看highlight.js的官方網(wǎng)站）。

以前的CKEditor版本由于沒有比較好的代碼高亮插件，都是自己自定義插件，當(dāng)時用的是SyntaxHighlighter這個代碼高亮庫。大家也可網(wǎng)上搜下SyntaxHighlighter的資料

如何安裝Code Snippet？添加代碼片段高亮插件的具體步驟

添加Code Snippet的方法很簡單，不過由于版本兼容問題，目前官網(wǎng)上這個插件對4.4兼容最好，其他兼容則未進(jìn)行測試，所以使用這個插件最好是將CKEditor升級到4.4.1。

如果已經(jīng)熟悉CKEditor的插件機(jī)制，那么我們只要到官網(wǎng)上將Code Snippet下載下來（下載地址見文章頂部），將里面的整個文件夾解壓到ckeditor文件夾下的plugins文件夾內(nèi)。

然后設(shè)置下ckeditor的config.js配置文件,將插件添加進(jìn)去即可,代碼如下(這里只設(shè)置了一個插件屬性，其他屬性可根據(jù)需要設(shè)置)：

CKEDITOR.editorConfig = function (config) {
  //添加插件，多個插件用逗號隔開
  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'}
);

這里有一點需要注意，如果按照上面添加插件的步驟而出現(xiàn)下面這兩個錯誤：

1. CKEDITOR.resourceManager.load] Resource name "widget" was not found at"http://localhost:16577/Scripts/ckeditor/plugins/widget/plugin.js?t=
   
2. [CKEDITOR.resourceManager.load] Resource name "lineutils" was not found at "http://localhost:16577/Scripts/ckeditor/plug
   

這是因為下載的CKEditor缺少widget和lineutils插件，到官網(wǎng)將這兩個插件下載下來，只要將這兩個插件解壓到ckeditor文件夾下的plugins文件夾內(nèi)就可以了。一般是先出現(xiàn)第一個widget插件無法找到的錯誤，添加了widget插件后才會出現(xiàn)第二個找不到lineutils插件的錯誤，可見Code Snippet需要依靠這兩個插件。這兩個插件的下載地址如下：

1. http://ckeditor.com/addon/widget
2. http://ckeditor.com/addon/lineutils
   

還有最簡單的方式，首先打開Code Snippet下載地址，將插件添加到自定義CKEditor編輯器

然后進(jìn)入自定義CKEditor編輯器頁面，這里可以看到已經(jīng)將代碼高亮插件集成到CKEditor里面了，最后點擊下載就可以了，當(dāng)然這里有很多自定義UI和插件，可以選擇自己需要的插件和喜歡的編輯器界面。

這樣就完美的添加上了代碼片段高亮插件了。

如何讓代碼片段在普通頁面上顯示高亮？

我們會發(fā)現(xiàn)，雖然在編輯器中添加的代碼片段有高亮效果，但是將編輯器里的代碼片段放到頁面中卻沒有高亮的效果。這是因為編輯器的插件已經(jīng)默認(rèn)集成了highlight.js這個代碼高亮庫，所以我們要在頁面上顯示高亮就得重新引用和添加highlight.js庫。

我們先看下編輯器中的高亮代碼：

<pre>
<code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
  &lt;meta charset="utf-8" /&gt;
  &lt;title&gt;測試頁面&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;代碼片段高亮效果&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

可以看到 高亮的效果主要是根據(jù)<pre>標(biāo)簽和 <code class="language-html">這兩個標(biāo)簽來顯示的，其中l(wèi)anguage-html表示的顯示高亮語言為HTML。highlight.js就是根據(jù)這兩個標(biāo)簽來顯示高亮效果。

我們首先要將highlight.js下載下來（下載地址，可以選擇要高亮的編程語言種類），然后在需要代碼高亮的頁面添加下面的代碼：

<!--開頭這里的樣式為默認(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)。另外高亮庫默認(rèn)使用的是default.css的高亮風(fēng)格，這里是highlightjs的各種代碼高亮風(fēng)格的顯示效果，大家可以到上面測試選擇自己喜歡的高亮風(fēng)格：http://highlightjs.org/static/test.html。highlightjs的具體使用方法可以看官網(wǎng)的文檔：http://highlightjs.org/usage/。

到這里就可以完整的將代碼片段進(jìn)行高亮顯示了。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript操作XML文件技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。