집 > 기사 > php教程 > kindeditor与SyntaxHighlighter通用整合方法

kindeditor与SyntaxHighlighter通用整合方法

WBOY원래의: 2016-06-07 17:24:061409검색

最近笔者运用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 = &#39;scripts/clipboard.swf&#39;;       
        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;       
}

성명：

이전 기사：对thinkphp3.1查询条件array ('in',$getid)条件的理解다음 기사：phpcms v9二次开发之数据模型类

kindeditor与SyntaxHighlighter通用整合方法

관련 기사