wordpress最合适代码高亮编辑器及其配置

比如我写博客的时候通常会在博客中加入很多代码,所以就对代码高亮有很大的需求,以前用过各种插件实现代码高亮,也使用sublime中的highlight非插件的形式实现过代码高亮,比如本篇文章之前的代码高亮都是这个方法实现的,这需要粘贴到sublime,生成html代码,然后再复制回来,非常不方便,后来使用百度的UEditor富文本编辑器,但是它的代码高亮会转义空格,浏览没问题,但是查看页面源码的时候会发现有大量的 ,这个是ueditor在将内容存到数据库的时候就转换的,所以可以在数据库里用update替换一下,但是总的来说比较麻烦。

今天换成了kindeditor这款编辑器,方便不少,支持绝大多数语言,github上很多主题可选,当然可以自己调整css,这样可能会更方便一些。

首先下载kindeditor for wordpress,然后上传到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> ';

当然,大多数这样写之后,只是显示5,10,15,这样隔5的行号,如果要显示每行的行号,可以在prettify.css中修改

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}

替换为

li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:decimal}

如上设置好之后还有一个问题,就是默认prettify的实现是网页全部资源加载完之后才会渲染代码的高亮显示,这个时候如果有资源加载速度比较慢就无法高亮显示代码。

我们可以修改kindeditor的代码来改变,在kindeditor插件目录下,修改kindeditor_class.php中的代码:

public function add_head_script()
{
    //wp_enqueue_script('jquery');
    wp_enqueue_script('prettify-js', $this->plugin_path .'plugins/code/prettify.js','','20110329');
    ?>
    <script type="text/javascript">
         window.onload = function(){
             prettyPrint();
         }
    </script>
    <?php
}

这段代码中的一部分修改下,修改后的代码如下:

public function add_head_script()
{
    //wp_enqueue_script('jquery');
    wp_enqueue_script('prettify-js', $this->plugin_path .'plugins/code/prettify.js','','20110329');
    ?>
    <script type="text/javascript">
         jQuery(document).ready(function($){
   	$(function(){
                prettyPrint();
            });
   });
    </script>
    <?php
}

这里不能直接用$,必须用jQuery(document).ready(function($))括起来,因为wordpress自带的jquery与官方版本不同,不这样的话,在自带jquery模式下没法运行。

本文遵从CC3.0协议转载请注明:转自凌风技术站

本文标题:wordpress最合适代码高亮编辑器及其配置

本文链接地址:http://www.iaccepted.net/web/84.html

相关文章



发表评论

电子邮件地址不会被公开。 必填项已用*标注