kindeditor与SyntaxHighlighter通用整合方法
程序员文章站
2022-05-01 08:49:34
...
最近笔者运用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,用浏览器打开显示的是一个代码高亮显示的例子:
SyntaxHighlighter Build Test Page SyntaxHihglighter Test
This is a test file to insure that everything is working well.
function test() : String { return 10; }
显然被着色的代码是放在
之间的,其原理是给代码加上一个样式class="brush: c-sharp;",把语法提出来就是:brush: 语言脚本
上一篇: PHP抓屏函数实现屏幕快照代码分享