Shulou(Shulou.com)06/02 Report--

This article shares with you about the implementation of DedeCms 5.7code highlighting. The editor thought it was very practical, so I shared it with you as a reference. Let's follow the editor and have a look.

How to achieve DedeCms 5.7Code highlighting?

Whether to build a blog site or CMS type sites, many require code highlighting, Weaving Dream CMS is one of the more excellent CMS site building systems, unlike Wordpress, there are a lot of plug-ins available, I use the latest dedeCMS 5.7, search the Internet for a long time, mostly write articles on the integration of CKEditor and SyntaxHighlighter, but dedecms will do the integration of ckeditor, and generally only for ckeditor to modify the different.

So I can only think about and revise it by myself, and now write out the method for the reference of the webmaster friends:

First, go to the official SyntaxHighlighter website to download it at http://alexgorbatchev.com/SyntaxHighlighter/download/. It is recommended to download version 2.1. Version 3.0 does not seem to support automatic line wrapping. Version 2.1.382 is used here. Extract the downloaded files into the syntaxHighlight folder, remove the useless files, and leave only the scripts and styles folders.

2. Create a new dialogs folder and create a new file named syntaxhighlight.js in it. The code is too large to post. Please download syntaxhighlight.js directly.

If you want to change the style of the code area, please change the style in the tag at the following code.

The code is as follows:

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 ('+ c (j.code) + "); if (l) {m.insertBefore (l); l.remove ()} else {i.insertElement (m)}}

Then create a new images folder and store a syntaxhighlight.gif image file, which can be displayed on the editor's toolbar and can use 16'16 pixel images.

4. Create a new lang folder, which is a language pack, which contains two files, one is Chinese cn.js and the other is English en.js. The code content is as follows:

The en.js code is as follows:

The code is as follows:

CKEDITOR.plugins.setLang ('syntaxhighlight',' en', {syntaxhighlight: {title: 'Add or update a code snippet', sourceTab:' Source code', langLbl: 'Select language', advancedTab:' Advanced', hideGutter: 'Hide gutter', hideGutterLbl:' Hide gutter & line numbers.', hideControls: 'Hide controls', hideControlsLbl:' Hide code controls at the top of the code block.', collapse: 'Collapse', collapseLbl:' Collapse the code block by default. (controls need to be turned on)', showColumns: 'Show columns', showColumnsLbl:' Show row columns in the first line.', lineWrap: 'Disable line wrapping', lineWrapLbl:' Switch off line wrapping.', lineCount: 'Default line count', highlight:' Highlight lines', highlightLbl: 'Enter a comma seperated lines of lines you want to highlight, eg

The cn.js code is as follows:

The code is as follows:

CKEDITOR.plugins.setLang ('syntaxhighlight',' cn', {syntaxhighlight: {title: 'add or update code', sourceTab: 'code', langLbl: 'select language', advancedTab: 'advanced', hideGutter: 'hide split lines', hideGutterLbl: 'hide split lines and line numbers', hideControls: 'hide toolbars', hideControlsLbl: 'hide floating toolbars', collapse: 'code folding' CollapseLbl: 'default folding code block (toolbar needs to be enabled)', lineWrap: 'automatic line wrapping', lineWrapLbl: 'turn off automatic line wrapping', autoLinks: 'automatic link', autoLinksLbl:'do not automatically convert hyperlinks', lineCount: 'starting line number', highlight: 'highlighted line number', highlightLbl: 'enter line numbers separated by commas, such as 310.

5. Create a new plugin.js file, which is a required file for the ckeditor plug-in, and contains some configurations for the plug-in. The code is as follows:

The code is as follows:

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")}})

6. Since dedecms 5.7integrates a dedepage plug-in to add a custom ckeditor plug-in, under the / include/ckeditor/dedepage folder, open the plugin.js file and add it at the end:

Requires: ['syntaxhighlight'], where syntaxhighlight is the folder name of the code highlighting plug-in. The added code is as follows:

[code] / / Register a plugin named "dedepage". (function () {CKEDITOR.plugins.add ('dedepage', {init: function (editor) {/ / Register the command. Editor.addCommand ('dedepage', {exec: function (editor) {/ / Create the element that represents a print break. / / alert ('dedepageCmdflowers'); editor.insertHtml ("");}}); / / alert ('dedepageCmdbits'); / / Register the toolbar button. Editor.ui.addButton ('MyPage', {label:' insert Page break', command: 'dedepage', icon:' images/dedepage.gif'}); / / alert (editor.name);}, requires: ['fakeobjects'], requires: [' syntaxhighlight']});}) (); [/ code]

7. Modify the / include/ckeditor/ckeditor.inc.php file and add the element Code to the last line of the $toolbar ['Basic'] array. The modified code is as follows:

The code is as follows:

Toolbar ['Basic'] = array (array (' Source','-','Templates'), array ('Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'), array (' Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'), array ('ShowBlocks'), array (' Image','Flash'), array ('Maximize'),' /', array ('Bold') 'Italic','Underline','Strike','-'), array (' NumberedList','BulletedList','-','Outdent','Indent','Blockquote'), array ('JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'), array (' Table','HorizontalRule','Smiley','SpecialChar'), array ('Link','Unlink','Anchor'),' /', array ('Styles','Format','Font','FontSize'), array (' TextColor') 'BGColor',' MyPage','Code'))

At this point, the modification of the editor has been completed, and the directory structure diagram of the modified syntaxhighlight folder file is shown below:

Upload the syntaxhighlight folder to the / include/ckeditor/plugins/ folder, open the background, and try adding articles to see if the button shown in the figure appears on the last line of the editor:

Click the button to pop up the dialog box shown below to enter the code, and you can switch to the advanced option to make some configuration for the code highlighting:

Eighth, but these are not enough, but also in the article template file / templets/default/article_article.htm file to introduce highlighted brush JS file and CSS file, as you need to introduce a lot of JS, so it is recommended to introduce the code in front of the tag, waiting for the previous web page to load after loading, display.

The code is as follows:

SyntaxHighlighter.config.clipboardSwf ='/ include/ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf'; SyntaxHighlighter.all ()

The final published and generated article page effect picture is as follows:

Of course, the integration also has some disadvantages, that is, a large number of JS files may be introduced into the html page, which may be slow to load, and the extensibility is not strong, so I will optimize the plug-in from time to time. I also hope that netizens can put forward their opinions.

Thank you for reading! On the DedeCms 5.7code highlight implementation method to share here, I hope the above content can be helpful to you, so that you can learn more knowledge. If you think the article is good, you can share it and let more people see it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.