个人资料

主页 博客 留言板 搜索
跳过导航链接首页 > 博客列表 > 博客正文

kindeditor使用syntaxhighlighter高亮代码

分类

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插件高亮。插件可以在官网下载。

songshizhao
最初发表2017/9/21 3:33:57 最近更新2017/9/21 3:33:57 792
为此篇作品打分
10