既然要當作技術筆記的部落格,難免需要放一些code啦,可是如果只用ckeditor放code在複製的時候可能會將網站的html參數也給一起複製,經過了搜尋之後發現ckeditor本身就有code snippet插件可以讓我們來放code

不過原生的樣式非常的醜,而且沒有高亮顯示,讓人不知道頭尾在哪,所以又找了可以跟code snippet整合的模組或是插件,找到了以下模組

  1. GeSHi Filter for syntax highlighting  整合性較高
  2. highlight js  懶人款
  3. 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內

清除快取

大功告成!!

 

Facebook 功能: