kindEditor对代码默认加在
标签中。因此可以从这里入手,因为kindeditor提供的代码输入在html显示格式如下:
<pre class="“prettyprint" lang-cs”="">代码 </pre>使用syntaxhighlighter高亮代码,首先将pre的className改成syntaxhighlighter可以识别的格式。syntaxhighlighter可以识别的语言名字如下所示。
![]()
在网页中插入以下脚本:
<%--代码高亮--%> <script> var cs = document.getElementsByClassName("prettyprint lang-cs"); while (cs.length > 0) { cs[0].className = "brush: csharp"; } var js = document.getElementsByClassName("prettyprint lang-js"); while (js.length > 0) { js[0].className = "brush: js"; } var xml = document.getElementsByClassName("prettyprint lang-xml"); while (xml.length > 0) { xml[0].className = "brush: xml"; } var html = document.getElementsByClassName("prettyprint lang-html"); while (html.length > 0) { html[0].className = "brush: xml"; } var css = document.getElementsByClassName("prettyprint lang-css"); while (css.length > 0) { css[0].className = "brush: css"; } </script> <script src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js"></script> <script src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJScript.js"></script> <script src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.js"></script> <script src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script> <script src="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js"></script> <%--<link href="http://apps.bdimg.com/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css" rel="stylesheet">--%> <link href="../syntaxhighlighter_3.0.83/styles/shCoreDefault.css" rel="stylesheet">上述脚本,先替换了kindeditor的pre格式的className,然后使用syntax插件高亮。插件可以在官网下载。