kindeditor使用syntaxhighlighter高亮代码

因为kindeditor提供的代码输入在html显示格式如下:

<pre class=“prettyprint lang-cs”>
代码
</pre>
使用syntaxhighlighter高亮代码,首先将pre的className改成syntaxhighlighter可以识别的格式。syntaxhighlighter可以识别的语言名字如下所示。


 在网页中插入以下脚本:


    <script src="../syntaxhighlighter_3.0.83/scripts/shCore.js"></script>

    <script src="../syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
    <script src="../syntaxhighlighter_3.0.83/scripts/shBrushCSharp.js"></script>
    <script src="../syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>
    <script src="../syntaxhighlighter_3.0.83/scripts/shBrushCss.js"></script>

    <link type="text/css" rel="stylesheet" href="../syntaxhighlighter_3.0.83/styles/shCoreDefault.css" />
    <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>SyntaxHighlighter.all();</script>



    上述脚本,先替换了kindeditor的pre格式的className,然后使用syntax插件高亮。插件可以在官网下载。



作者:songshizhao 发表于:2017-09-21T03:33:57 访问量:246