最新消息:非无江海志,潇洒送日月

DIY代码美化插件WP-Syntax配合编辑器使用教程

网站建设 江海志 4524浏览 0评论

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

一、菜鸟型:

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

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

二、臭美型:

当然,如果你不喜欢代码的默认样式,你可以自己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","<code>","</code>","c");

在后面加上

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

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

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

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

在后面加上

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

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

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

转载请注明:江海志の博客 » DIY代码美化插件WP-Syntax配合编辑器使用教程

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址