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

  • A+
所属分类:wp教程

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

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

首先下载kindeditor for wordpress,然后上传到wordpress的plugins目录,进入目录之后启用就可以了,然后在最下面的设置中,可以选择开启前端代码高亮,并设定相应的主题。

如果要显示行号,可以在code目录中code.js中修改代码,如下

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

替换为

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

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

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

替换为

  1. 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中的代码:

  1. public function add_head_script()
  2. {
  3. //wp_enqueue_script('jquery');
  4. wp_enqueue_script('prettify-js', $this->plugin_path .'plugins/code/prettify.js','','20110329');
  5. ?>
  6. <script type="text/javascript">
  7. window.onload = function(){
  8. prettyPrint();
  9. }
  10. </script>
  11. <?php
  12. }

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

  1. public function add_head_script()
  2. {
  3. //wp_enqueue_script('jquery');
  4. wp_enqueue_script('prettify-js', $this->plugin_path .'plugins/code/prettify.js','','20110329');
  5. ?>
  6. <script type="text/javascript">
  7. jQuery(document).ready(function($){
  8. $(function(){
  9. prettyPrint();
  10. });
  11. });
  12. </script>
  13. <?php
  14. }

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

weinxin
我的微信
这是我的微信扫一扫
SJ

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: