DedeCms 5.7程式碼高亮怎麼實現
Dec 26, 2019 am 09:49 AMDedeCms 5.7程式碼高亮怎麼實作?
無論建部落格網站或CMS類型網站,很多都需要程式碼高亮,織夢CMS是國內比較優秀的CMS建站系統之一,不像Wordpress一樣有大把大把的插件可用,我用的是最新的dedeCMS 5.7,在網上搜了很長時間資料,大都寫的是CKEditor和SyntaxHighlighter整合的文章,但是dedecms將ckeditor做了集成,和一般的只針對於ckeditor對config.js修改不同。
推薦學習:織夢cms
所以只能自己琢磨修改了,現將方法寫出供站長朋友們參考:
一、先去SyntaxHighlighter官方網站下載,網址:http://alexgorbatchev.com/SyntaxHighlighter/download/,建議下載2.1版本,3.0版本的貌似不支援自動換行,這裡使用的是2.1.382版本。將下載的文件解壓縮在syntaxHighlight資料夾裡,去除裡面無用的文件,只留下scripts和styles資料夾。
二、新建dialogs資料夾,在裡面新建一個名為syntaxhighlight.js的文件,因程式碼量過大,不宜貼出,請直接下載syntaxhighlight.js
#如果想修改程式碼區域的樣式請在以下程式碼處修改
標籤裡的樣式。程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 |
|
三、然後新建images資料夾,存放一個syntaxhighlight.gif圖片文件,該圖片文件在編輯器工具列上顯示,可以使用16*16像素的圖片
四、新建lang資料夾,是語言包,裡面有兩個文件,一個是中文cn.js一個是英文en.js,程式碼內容如下:
en.js程式碼如下:
程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
cn.js程式碼如下:
程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
五、新建plugin.js文件,該文件是ckeditor插件必須得文件,裡面是對該插件的一些配置,程式碼如下:
程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
六、由於dedecms 5.7自己整合了一個dedepage插件,用來新增ckeditor自訂插件,在/include/ckeditor/dedepage資料夾下,開啟plugin.js檔案在最後面加入:
requires : ['syntaxhighlight'],其中syntaxhighlight為程式碼高亮插件的檔案夾名,添加完之後的程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
七、修改/include/ckeditor/ckeditor.inc.php文件,在$toolbar['Basic']數組的最後一行添加元素Code,修改後程式碼如下:
程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
至此,編輯器的修改已經完成,修改後的syntaxhighlight資料夾檔案目錄結構圖如下圖:
# 將syntaxhighlight資料夾上傳到/include/ckeditor/plugins/資料夾下,打開後台,新增文章試一下,看看編輯器的上最後一行是否出現如圖所示的按鈕:
點擊按鈕彈出如下圖所示的對話方塊輸入程式碼,並且可以切換到進階選項對程式碼高亮顯示做一些設定:
八、但是光這些還不夠,還要在文章模板文件/templets/default/article_article.htm文件裡引入高亮顯示的筆刷JS文件和CSS文件,由於是需要引入很多JS ,所以建議將引入的程式碼放在標籤之前,等待前面的網頁加載完後加載,進行顯示。
程式碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
最後發表並產生的文章頁面效果圖如下:
當然,該整合也有點缺點,就是在html頁面頁面中可能會引入大量的JS文件,加載起來可能會比較慢,另外可拓展性不強,我也會不定期優化該插件,也希望各位網友能提出意見。
以上是DedeCms 5.7程式碼高亮怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱門文章

熱門文章

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)