How to implement code highlighting in DedeCms 5.7?
Whether building a blog website or a CMS-type website, many of them require code highlighting. Dreamweaver CMS is one of the more excellent CMS website building systems in China. It does not have a lot of plug-ins like WordPress. It is available. I am using the latest dedeCMS 5.7. I have searched for information on the Internet for a long time. Most of them write articles about the integration of CKEditor and SyntaxHighlighter. However, dedecms has integrated ckeditor, and generally only targets ckeditor for config.js. Modifications are different.
Recommended study: 梦Weavercms
So I can only think about and modify it myself. Now I will write down the method for the reference of webmaster friends:
1. First go to the official website of SyntaxHighlighter to download, URL: http://alexgorbatchev.com/SyntaxHighlighter/download/. It is recommended to download version 2.1. Version 3.0 does not seem to support automatic line wrapping. The version 2.1.382 is used here. Unzip the downloaded file in the syntaxHighlight folder and remove the useless files, leaving only the scripts and styles folders.
2. Create a new dialogs folder and create a file named syntaxhighlight.js in it. Because the code is too large, it is not suitable to post it. Please download syntaxhighlight.js directly
If you want to modify it For the style of the code area, please modify the style in the
tag, wait for the previous web page to load, and then load and display it.
The code is as follows:
<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 = '/include/ckeditor/plugins/syntaxhighlight/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
The final published and generated article page rendering is as follows:
Of course, this integration also has some shortcomings. A large number of JS files may be introduced into the html page, which may be slow to load. In addition, the scalability is not strong. I will also optimize the plug-in from time to time, and I hope all netizens can provide opinions.
The above is the detailed content of How to implement code highlighting in DedeCms 5.7. For more information, please follow other related articles on the PHP Chinese website!