kindeditor代码高亮自动行号功能

代码自动行号功能

kindeditor默认未开启代码行号显示功能的，可以通过在html视图下，将需要显示行号的代码做如下更改：

    <pre class="prettyprint'

    //改为：

    <pre class="prettyprint linenums'

不过虽然这样自定义很强，不过想在实现增加行号每次都手工添加还是比较麻烦，有没有一劳永逸的办法呢？当然可以的，可以修改wp-content\plugins\kindeditor-for-wordpress\plugins\code\code.js文件：

    html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';

    更改为

    html = '<pre class="prettyprint linenums' + cls + '">\n' + K.escape(code) + '</pre> ';

代码高亮在要显示的页面插入以下代码

<link rel="stylesheet" type="text/css" href="/editor/plugins/code/prettify.css" />

<script type="text/javascript" src="/editor/plugins/code/prettify.js"></script>

<script>

$(function(){ prettyPrint(); });

</script>

默认代码是不换行的，要自动换行可以修改prettify.css，把white-space原来的值pre修改为pre-wrap：

    pre.prettyprint {  

        border: 0;  

        border-left: 3px solid rgb(204, 204, 204);  

        margin-left: 2em;  

        padding: 0.5em;  

        font-size: 110%;  

        display: block;  

        font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;  

        margin: 1em 0px;  

        white-space: pre-wrap; /* 原来的值是 pre;*/  

    }