首頁 CMS教程 DEDECMS DedeCms 5.7程式碼高亮怎麼實現

DedeCms 5.7程式碼高亮怎麼實現

Dec 26, 2019 am 09:49 AM
dedecms

DedeCms 5.7程式碼高亮怎麼實現

DedeCms 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

onOk : function() {

var i = this.getParentEditor();

var h = i.getSelection();

var g = h.getStartElement();

var l = g && g.getAscendant("pre", true);

var j = f();

this.commitContent(j);

var k = e(j);

var m = CKEDITOR.dom.element

.createFromHtml(&#39;<table style="border:1px solid #EAED9C;width:660px;"><tr><td><pre class="&#39; + k + &#39;">&#39;

+ c(j.code) +"

登入後複製
"); if (l) { m.insertBefore(l); l.remove() } else { i.insertElement(m) } },

三、然後新建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

CKEDITOR.plugins.setLang(&#39;syntaxhighlight&#39;, &#39;en&#39;,

{

syntaxhighlight:

{

title: &#39;Add or update a code snippet&#39;,

sourceTab: &#39;Source code&#39;,

langLbl: &#39;Select language&#39;,

advancedTab: &#39;Advanced&#39;,

hideGutter: &#39;Hide gutter&#39;,

hideGutterLbl: &#39;Hide gutter & line numbers.&#39;,

hideControls: &#39;Hide controls&#39;,

hideControlsLbl: &#39;Hide code controls at the top of the code block.&#39;,

collapse: &#39;Collapse&#39;,

collapseLbl: &#39;Collapse the code block by default. (controls need to be turned on)&#39;,

showColumns: &#39;Show columns&#39;,

showColumnsLbl: &#39;Show row columns in the first line.&#39;,

lineWrap: &#39;Disable line wrapping&#39;,

lineWrapLbl: &#39;Switch off line wrapping.&#39;,

lineCount: &#39;Default line count&#39;,

highlight: &#39;Highlight lines&#39;,

highlightLbl: &#39;Enter a comma seperated lines of lines you want to highlight, eg <em>3,10,15</em>.&#39;

}

});

登入後複製

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

CKEDITOR.plugins.setLang(&#39;syntaxhighlight&#39;, &#39;cn&#39;,

{

syntaxhighlight:

{

title: &#39;添加或更新代码&#39;,

sourceTab: &#39;代码&#39;,

langLbl: &#39;选择语言&#39;,

advancedTab: &#39;高级&#39;,

hideGutter: &#39;隐藏分割线&#39;,

hideGutterLbl: &#39;隐藏分割线和行号&#39;,

hideControls: &#39;隐藏工具栏&#39;,

hideControlsLbl: &#39;隐藏浮动工具栏&#39;,

collapse: &#39;代码折叠&#39;,

collapseLbl: &#39;默认折叠代码块 (需要启用工具栏)&#39;,

lineWrap: &#39;自动换行&#39;,

lineWrapLbl: &#39;关闭自动换行&#39;,

autoLinks: &#39;自动链接&#39;,

autoLinksLbl: &#39;不自动转换超链接&#39;,

lineCount: &#39;起始行号&#39;,

highlight: &#39;高亮行号&#39;,

highlightLbl: &#39;输入以逗号分隔的行号, 如 <em>3,10,15</em>.&#39;

}

});

登入後複製

五、新建plugin.js文件,該文件是ckeditor插件必須得文件,裡面是對該插件的一些配置,程式碼如下: 

程式碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

CKEDITOR.plugins.add("syntaxhighlight", {

requires : [ "dialog" ],

lang : [ "cn" ],

init : function(a) {

var b = "syntaxhighlight";

var c = a.addCommand(b, new CKEDITOR.dialogCommand(b));

c.modes = {

wysiwyg : 1,

source : 1

};

c.canUndo = false;

a.ui.addButton("Code", {

label : a.lang.syntaxhighlight.title,

command : b,

icon : this.path + "images/syntaxhighlight.gif"

});

CKEDITOR.dialog.add(b, this.path + "dialogs/syntaxhighlight.js")

}

});

登入後複製

六、由於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

[code]

// Register a plugin named "dedepage".

(function()

{

CKEDITOR.plugins.add( &#39;dedepage&#39;,

{

init : function( editor )

{

// Register the command.

editor.addCommand( &#39;dedepage&#39;,{

exec : function( editor )

{

// Create the element that represents a print break.

// alert(&#39;dedepageCmd!&#39;);

editor.insertHtml("

");

}

});

// alert(&#39;dedepage!&#39;);

// Register the toolbar button.

editor.ui.addButton( &#39;MyPage&#39;,

{

label : &#39;插入分页符&#39;,

command : &#39;dedepage&#39;,

icon: &#39;images/dedepage.gif&#39;

});

// alert(editor.name);

},

requires : [ &#39;fakeobjects&#39; ],

requires : [&#39;syntaxhighlight&#39;]

});

})();

[/code]

登入後複製

七、修改/include/ckeditor/ckeditor.inc.php文件,在$toolbar['Basic']數組的最後一行添加元素Code,修改後程式碼如下: 

程式碼如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

$toolbar[&#39;Basic&#39;] = array(

array( &#39;Source&#39;,&#39;-&#39;,&#39;Templates&#39;),

array( &#39;Cut&#39;,&#39;Copy&#39;,&#39;Paste&#39;,&#39;PasteText&#39;,&#39;PasteFromWord&#39;,&#39;-&#39;,&#39;Print&#39;),

array( &#39;Undo&#39;,&#39;Redo&#39;,&#39;-&#39;,&#39;Find&#39;,&#39;Replace&#39;,&#39;-&#39;,&#39;SelectAll&#39;,&#39;RemoveFormat&#39;),

array( &#39;ShowBlocks&#39;),array(&#39;Image&#39;,&#39;Flash&#39;),array(&#39;Maximize&#39;),&#39;/&#39;,

array( &#39;Bold&#39;,&#39;Italic&#39;,&#39;Underline&#39;,&#39;Strike&#39;,&#39;-&#39;),

array( &#39;NumberedList&#39;,&#39;BulletedList&#39;,&#39;-&#39;,&#39;Outdent&#39;,&#39;Indent&#39;,&#39;Blockquote&#39;),

array( &#39;JustifyLeft&#39;,&#39;JustifyCenter&#39;,&#39;JustifyRight&#39;,&#39;JustifyBlock&#39;),

array( &#39;Table&#39;,&#39;HorizontalRule&#39;,&#39;Smiley&#39;,&#39;SpecialChar&#39;),

array( &#39;Link&#39;,&#39;Unlink&#39;,&#39;Anchor&#39;),&#39;/&#39;,

array( &#39;Styles&#39;,&#39;Format&#39;,&#39;Font&#39;,&#39;FontSize&#39;),

array( &#39;TextColor&#39;, &#39;BGColor&#39;, &#39;MyPage&#39;,&#39;Code&#39;)

);

登入後複製

至此,編輯器的修改已經完成,修改後的syntaxhighlight資料夾檔案目錄結構圖如下圖:

DedeCms 5.7程式碼高亮怎麼實現

#  將syntaxhighlight資料夾上傳到/include/ckeditor/plugins/資料夾下,打開後台,新增文章試一下,看看編輯器的上最後一行是否出現如圖所示的按鈕:

DedeCms 5.7程式碼高亮怎麼實現

  點擊按鈕彈出如下圖所示的對話方塊輸入程式碼,並且可以切換到進階選項對程式碼高亮顯示做一些設定:

DedeCms 5.7程式碼高亮怎麼實現

八、但是光這些還不夠,還要在文章模板文件/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

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shCore.js"> </script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushJava.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushScala.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushVb.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushXml.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushBash.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushCpp.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushCSharp.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/cripts/shBrushCss.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushDelphi.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushDiff.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushGroovy.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushPlain.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushPython.js"></script>

<script type="text/javascript" src="/include/ckeditor/plugins/syntaxhighlight/scripts/shBrushRuby.js"></script>

<link type="text/css" rel="stylesheet" href="/include/ckeditor/plugins/syntaxhighlight/styles/shCore.css"/>

<link type="text/css" rel="stylesheet" href="/include/ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css"/>

<script type="text/javascript">

SyntaxHighlighter.config.clipboardSwf = &#39;/include/ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf&#39;;

SyntaxHighlighter.all();

</script>

登入後複製

最後發表並產生的文章頁面效果圖如下:

DedeCms 5.7程式碼高亮怎麼實現

  當然,該整合也有點缺點,就是在html頁面頁面中可能會引入大量的JS文件,加載起來可能會比較慢,另外可拓展性不強,我也會不定期優化該插件,也希望各位網友能提出意見。

以上是DedeCms 5.7程式碼高亮怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

帝國cms資源網模板在哪 帝國cms資源網模板在哪 Apr 17, 2024 am 10:00 AM

帝國cms資源網模板在哪

dedecms怎麼用 dedecms怎麼用 Apr 16, 2024 pm 12:15 PM

dedecms怎麼用

精準可靠的dedecms轉換工具評測報告 精準可靠的dedecms轉換工具評測報告 Mar 12, 2024 pm 07:03 PM

精準可靠的dedecms轉換工具評測報告

dedecms怎麼上傳本機視頻 dedecms怎麼上傳本機視頻 Apr 16, 2024 pm 12:39 PM

dedecms怎麼上傳本機視頻

dedecms怎麼實現模板替換 dedecms怎麼實現模板替換 Apr 16, 2024 pm 12:12 PM

dedecms怎麼實現模板替換

簡單學習dedecms編碼轉換功能的方法 簡單學習dedecms編碼轉換功能的方法 Mar 14, 2024 pm 02:09 PM

簡單學習dedecms編碼轉換功能的方法

dedecms有什麼漏洞 dedecms有什麼漏洞 Aug 03, 2023 pm 03:56 PM

dedecms有什麼漏洞

dedecms什麼意思 dedecms什麼意思 Apr 16, 2024 pm 12:48 PM

dedecms什麼意思

See all articles