主机格调

由于昨天写《调用非官方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文件,找到

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

在后面加上

1
2
3
4
5
6
7
8
edButtons[edButtons.length]=
new edButton("ed_pre_html","pre_html","<p0re lang='html' line='1'>\n","\n</p0re>","p",-1);
edButtons[edButtons.length]=
new edButton("ed_pre_php","pre_php","<p0re lang='php' line='1'>\n","\n</p0re>","pp",-1);
edButtons[edButtons.length]=
new edButton("ed_pre_css","pre_css","<p0re lang='css' line='1'>\n","\n</p0re>","ppp",-1);
edButtons[edButtons.length]=
new edButton("ed_pre_js","pre_js","<p0re lang='JavaScript' line='1'>\n","\n</p0re>","pppp",-1);

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

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

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

在后面加上

1
2
3
4
5
6
7
8
j.Buttons[j.Buttons.length]=
new edButton(a+"_pre_html","pre_html","<p0re lang='html' line='1'>\n","\n</p0re>","p",-1);
j.Buttons[j.Buttons.length]=
new edButton(a+"_pre_php","pre_php","<p0re lang='php' line='1'>\n","\n</p0re>","pp",-1);
j.Buttons[j.Buttons.length]=
new edButton(a+"_pre_css","pre_css","<p0re lang='css' line='1'>\n","\n</p0re>","ppp",-1);
j.Buttons[j.Buttons.length]=
new edButton(a+"_pre_js","pre_js","<p0re lang='JavaScript' line='1'>\n","\n</p0re>","pppp",-1);

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

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

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

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/129.html