西门的后花园

一个热爱网络的年轻人的博客

DIY代码美化插件WP-Syntax,增加懒人代码按钮

由于昨天写《调用非官方API实现WordPress博客添加腾讯微博》需要贴上一段HTML和JavaScript的代码,但是我用了blockquote标签和code标签都无效,JavaScript代码直接运行了,真佩服我以前的代码都是用blockquote引用的~~~后来求助,最终选择了木木同学推荐的WP-Syntax插件。

WP-Syntax插件官方下载地址:点我

一、菜鸟型:

下载好插件上传到wp-content/plugins下面,相信大家都会,然后启动该插件。

写文章需要贴代码时,请切换到“HTML”模式下面,代码格式【<pre lang=’代码语言’ line=’1′>这里贴代码</pre>】。代码语言有很多,比如说最常见的html,php,css,javascript等,官方有详细介绍:点我。line=’1’的意思是代码前面的数字,如果不想要数字,直接不写这个就OK。但是此款插件不支持从“HTML”模式下切换到“可视化”,不然代码都会运行,所以建议大家先写完文字和图片,最后切换到“HTML”模式下来贴代码。

效果请见《调用非官方API实现WordPress博客添加腾讯微博

二、臭美型:

当然,如果你不喜欢代码的默认样式,你可以自己DIY。

修改字体方法:wp-syntax/geshi/geshi.php里面第442行,我改了默认字体,你喜欢什么字体也可以自己修改。

var $overall_style = 'font-family:monospace;';

修改默认样式方法:wp-syntax/wp-syntax.css,里面的所有CSS样式都可以删掉重写,我就改了一项而已,就是代码距上下的间距,自己感觉更舒服吧。

margin: 1em 0;

三、偷懒型:

每次写代码的时候,需要手动加【<pre lang=’代码语言’ line=’1′>这里贴代码</pre>】是不是感觉很累?其实可以在“HTML”模式下加上几个按钮来替换手动写代码。

代码按钮

使用方法和其他按钮一样,自己去试试就知道,下面我简单说下如何实现:(记得备份哦)

:因为在 pre 标签里再贴 pre 标签就会出问题,所以请将代码中的 p0re 替换为 pre,一段代码有两处。

首先是面板上加按钮的方法,在wp-includes/js/quicktags.js文件,找到

edButtons[edButtons.length]=new edButton("ed_code","code","","","c");

在后面加上

edButtons[edButtons.length]=
new edButton("ed_pre_html","pre_html","\n","\n","p",-1);
edButtons[edButtons.length]=
new edButton("ed_pre_php","pre_php","\n","\n","pp",-1);
edButtons[edButtons.length]=
new edButton("ed_pre_css","pre_css","\n","\n","ppp",-1);
edButtons[edButtons.length]=
new edButton("ed_pre_js","pre_js","\n","\n","pppp",-1);

一段代码就是一个按钮,我加了四个按钮:html、php、css、javascript,当然,你喜欢加几个也可以适当的加减。(后来才知道WP-Syntax不支持html代码变色,不过也无所谓了)

然后是加按钮的点击的操作,找到

j.Buttons[j.Buttons.length]=new edButton(a+"_code","code","","","c");

在后面加上

j.Buttons[j.Buttons.length]=
new edButton(a+"_pre_html","pre_html","\n","\n","p",-1);
j.Buttons[j.Buttons.length]=
new edButton(a+"_pre_php","pre_php","\n","\n","pp",-1);
j.Buttons[j.Buttons.length]=
new edButton(a+"_pre_css","pre_css","\n","\n","ppp",-1);
j.Buttons[j.Buttons.length]=
new edButton(a+"_pre_js","pre_js","\n","\n","pppp",-1);

这样就大功告成了,不过此时你看你后台编辑的时候,或许看不见这几个按钮,记得点下刷新哦!

提供WordPress2.92懒人代码,直接下载quicktags.js文件覆盖即可,点我下载

OK,是不是很酷呢?呵呵,最后是版权:WordPress 代码高亮插件:WP-Syntax在后台添加SYNTAX代码按键

评论列表

  1. 个人还是觉得 SyntaxHighlighter 好用哦 建议尝试 保证让你放弃这个

  2. 恩,我喜欢臭美型的,哈哈

  3. 就是不能来回切换 很不爽

  4. 偷懒型的不错

  5. 现在不是很喜欢用插件了~~能不用就尽量不用

  6. 这个我看得头都晕了,呵呵

  7. 又菜鸟又臭美的路过~~~

  8. 我用了第三方的后台编辑器

  9. 我属于偷懒型的哦

  10. 最近不敢乱折腾,昨晚就玩挂了 👿

  11. 我也是属于偷懒型的,感觉这个还是有点麻烦,要是能再偷懒一点就好了! 😈

  12. 臭美一下啊,不错哈

  13. 不错 改了以后的确很好看的了~

  14. 我记得我订阅过你博客啊..郁闷 错过了那么多的好文章..

  15. 一般都是科技文 哈哈

  16. 我最近新建了一个博客,正在折腾中 这个的确很偷懒,等会去折腾新站

  17. 这个插件我用过,非常的不错啊,呵呵

  18. 哈哈,我也喜欢臭美型的啊!

  19. 为什么我不懂 为什么呢 呜呜。。。 西门 到底吹不吹雪呢 😥

  20. 跳过前两条,直蹦偷懒型而去 🙄

  21. 唉,我是一看到代码就头疼

  22. 好东西,以前一直也是想用引用就能表达,原来不行阿

    • 我试了blockquote标签和code标签都不行,所以才问别人,原来还有引用代码插件,我也是第一次听说,呵呵 😈

  23. 目前可能还不需要这个插件咯

  24. 学习了,初次来..互踩

  25. 从不贴代码 = = 🙄

  26. 喜欢自己diy的效果

  27. 我怎么看你旁边的微博就在不停的转,一直显示数据正在加载啊~ ➡

  28. 这皮很眼熟啊,支持你的博,路过就留言~~

  29. 一个新的折腾帝就此诞生 点评完毕!

  30. 貌似没考虑转义符的问题?加上一个 esacaped=”true” 更合适

    • 哪个地方需要转义符?我草鸟,况且这篇文章写了好久了。 ➡

      • 代码中遇到尖括号或者双引号,不就被转义了么?
        我还特地为此写了个wlw插件http://imtimmy.com/wp-syntax-quick-insert/

        • 所以我在文章里面说了一句“但是此款插件不支持从“HTML”模式下切换到“可视化”,不然代码都会运行,所以建议大家先写完文字和图片,最后切换到“HTML”模式下来贴代码。”,暂时还没有更好的啊 ❓

  31. 额,手太快打错了,escaped

  32. 我也用的这款插件~
    不能切换确实是硬伤。。。

    • 不过如果自动转译,又代码高亮,那HTML里面的代码量改多大啊 ➡
      不过也没发现有这么完美的插件。

      • 装wp-syntax button这个插件,可以实现自动转译,模式下来回切换。

        • 谢谢,明天晚上测试,今天太晚了。 😀

        • wp-syntax button完全无效果。
          WP-Syntax Editor Integration Plugin倒是可以切换,但是没有高亮,边框等美化,非常抽,而且代码长也无换行… ❓

          • 这两个插件我都用过,都很正常啊。现在在用第二个了,你说的边框美化,无换行是应该去wp-syntax.css里设置,和这个插件没什么关系吧?

            • 也对,美化部分应该是CSS控制,那高亮也是CSS吧?我去对比下两个插件的CSS。

              • 高亮不是啊,高亮是wp-syntax的geshi.js来控制的,你发布以后无高亮吗?
                这两个插件只是将html的tag进行了转义,在编辑模式下可以源代码和可视代模式切换,必须配合wp-syntax去完成。

                • 原来是两个插件一起开,这东西还是非常的不方便,测试出几个BUG了,算了,下次找个无插件的,能够自动转译就OK了。我要求不高,高亮无所谓。 ❓

                  • 你想在编辑器里就实现高亮??? 😮

                    • 大哥,我没这么夸张好不好…等我找到无插件的再聊这个,暂时就这样,插件只是临时对策。

                  • 换编辑器了,fck,ckeditor都可以做到前台转义。还有一个pwwang for fckeditor的插件可以实现,关于这方面我google了好久了,希望你能找到更好的方法。

  33. 我就是那偷懒型,前几天刚弄上,第一次过来就看到一样的方法,不错~

  34. 呵呵 这段修改很不错 用html编辑模式 很方便的说

  35. 假装百度来这里,嘻嘻

  36. 其实是支持 HTML 变色的。
    写 html 是错误的 应该写成 html4strict
    官方文档里面有的

  37. wp3.3.2不好用了,这个方法不管用了。。文件内容都变了

  38. 个人不建议用这类使用font渲染颜色的插件或修改,你可以看看你的源文件,前端体验是不错,但SEO的体验比较差,自用的:http://www.dongqinjing.com/firefox-scroll-bar-style/,直接用pre固定样式和禁止解析就可以了。

  39. Dallas

    escaped="true"

西门进行回复 取消回复

分类目录