Drupal 7 CKEditor Code Snippet 高亮顯示
既然要當作技術筆記的部落格，難免需要放一些code啦，可是如果只用ckeditor放code在複製的時候可能會將網站的html參數也給一起複製，經過了搜尋之後發現ckeditor本身就有code snippet插件可以讓我們來放code
不過原生的樣式非常的醜，而且沒有高亮顯示，讓人不知道頭尾在哪，所以又找了可以跟code snippet整合的模組或是插件，找到了以下模組
- GeSHi Filter for syntax highlighting 整合性較高
- highlight js 懶人款
- Prism 未來潛力組
這三個模組來幫助我們的code 更容易辨識
先來講解一下如何將code snippet叫出來好了
在 設定/內容撰寫/CKEditor 或是網址列輸入 admin/config/content/ckeditor
在你的輸入格式選擇 編輯
將 EDITOR APPEARANCE 展開 可以看到上方的 Current toolbar 就是我們現在CKEditro的插件 注意到下方 Available buttons
就是我們的code snippet囉 將他拖曳到 Current toolbar
往下看到 Plugins 將 Code Snippets啟用
馬上來放一段code看看！！檢視一下原始碼
成功囉
接下來就是如何將code高亮顯示了 在這邊我用prism是因為他的延展性很高小缺點就是他的插件需要自己新增class希望未來可以有高度的整合
首先先裝起Prism這個模組並且去 http://prismjs.com/index.html 下載libraries 勾選你要的插件跟語言
下載然後將他的css跟js丟到 sites/all/libraries/prism內
清除快取
大功告成！！