最近笔者运用Thinkphp框架开发了一个博客系统,就叫它WBlog吧,当然目前流行的博客系统有很多,如wordpress,z-blog等,但我觉得wordpress似乎太笨重了,z-blog又是asp脚本的,本人对asp不是很了解,找不到称心如意的,那就干脆自己开发吧!
考虑到以后写代码方面的博文比较多,为了看起来优雅,代码高亮显示功能是必须的。网上流行的编辑器比较多,但自身带有代码高亮显示功能的却很少,最后找到百度在线编辑器ueditor。ueditor的代码高亮显示功能确实很好,插件包却相当地大,解压后10多M!我博客的编辑器用的是kindeditor,经过我整理不过几百KB,整个博客的文件才不到3M,如果改换ueditor,要带上这么笨重的包袱,运行起来肯定也不爽。我研究了一下ueditor,发现它的代码高亮显示功能原来是整合了syntaxhighlighter插件,于是我就有了kindeditor整合syntaxhighlighter的想法,百度一下,网上关于kindeditor整合syntaxhighlighter还真不少,众说纷纷,但却局限于某个版本,或者连版本也不给出,我乱了。没办法,只好自己摸索了。
为什么syntaxhighlighter可以使代码高亮显示?
带着这个问题到http://alexgorbatchev.com/SyntaxHighlighter/download/去下载一个SyntaxHighlighter2.1.364插件包,那里有许多版本的,低版本的解压后有一个实例文件test.html,用浏览器打开显示的是一个代码高亮显示的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>SyntaxHighlighter Build Test Page</title> <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushBash.js"></script> <script type="text/javascript" src="scripts/shBrushCpp.js"></script> <script type="text/javascript" src="scripts/shBrushCSharp.js"></script> <script type="text/javascript" src="scripts/shBrushCss.js"></script> <script type="text/javascript" src="scripts/shBrushDelphi.js"></script> <script type="text/javascript" src="scripts/shBrushDiff.js"></script> <script type="text/javascript" src="scripts/shBrushGroovy.js"></script> <script type="text/javascript" src="scripts/shBrushJava.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <script type="text/javascript" src="scripts/shBrushPhp.js"></script> <script type="text/javascript" src="scripts/shBrushPlain.js"></script> <script type="text/javascript" src="scripts/shBrushPython.js"></script> <script type="text/javascript" src="scripts/shBrushRuby.js"></script> <script type="text/javascript" src="scripts/shBrushScala.js"></script> <script type="text/javascript" src="scripts/shBrushSql.js"></script> <script type="text/javascript" src="scripts/shBrushVb.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf'; SyntaxHighlighter.all(); </script> </head> <body > <h1>SyntaxHihglighter Test</h1> <p>This is a test file to insure that everything is working well.</p> <pre class="brush: c-sharp;"> function test() : String { return 10; }