kindeditor与SyntaxHighlighter通用整合方法
- WBOYOriginal
- 2016-06-07 17:24:061409Durchsuche
最近笔者运用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;
}
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：对thinkphp3.1查询条件array ('in',$getid)条件的理解Nächster Artikel：phpcms v9二次开发之数据模型类