由于昨天写《调用非官方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代码按键
个人还是觉得 SyntaxHighlighter 好用哦 建议尝试 保证让你放弃这个
看来我得本地测试一下你说的这个插件了。
同推SyntaxHighlighter~
但不建议用WP的插件装它~
如果我换代码插件的话,之前的代码全要手动修改,好麻烦啊!
恩,我喜欢臭美型的,哈哈
自己DIY的效果肯定好啦,还可以配置主题DIY
就是不能来回切换 很不爽
嗯,这个是重点!
偷懒型的不错
突然想到还可以手动加其他功能的按钮。。。
现在不是很喜欢用插件了~~能不用就尽量不用
这是实话,但是好多功能暂时还不知道怎么用代码实现。 😡
这个我看得头都晕了,呵呵
其实我修改的时候,看那JS文件也头晕。。。 😕
又菜鸟又臭美的路过~~~
外加上不要脸的也飘过~~~
我用了第三方的后台编辑器
我暂时还没尝试第三方的编辑器额。 😕
我属于偷懒型的哦
强淫,经常在CHINAZ看见您的投稿~~~
最近不敢乱折腾,昨晚就玩挂了 👿
你不知道备份啊,实在不行,本地安装WordPress测试不会!猪
我也是属于偷懒型的,感觉这个还是有点麻烦,要是能再偷懒一点就好了! 😈
就安装插件这还怎么再简单啊 😮
臭美一下啊,不错哈
呵呵,DIY比较不一样嘛
不错 改了以后的确很好看的了~
呵呵,可以改成适合自己主题的样式嘛
我记得我订阅过你博客啊..郁闷 错过了那么多的好文章..
这个我就不知道了,我也不能查看谁订阅了我的博客 😈
呵呵 不错的
当然不错啦,弄了个好几个小时呢
一般都是科技文 哈哈
没办法,我是敲代码的 ❓
我最近新建了一个博客,正在折腾中 这个的确很偷懒,等会去折腾新站
呵呵,折腾能给自己带来自豪感!
昨天晚上搞了一半 打算今天晚上再战 , 折腾的好累, 睡眠不足 今天熊猫眼
今天我也要早于12点睡觉了,这几天每天都是转点睡觉,第二天6点就起来了,累。 😥
这个插件我用过,非常的不错啊,呵呵
我也是才知道的,对插件不感冒,平时都不怎么用插件。
哈哈,我也喜欢臭美型的啊!
人人都喜欢与众不同嘛 ❗
为什么我不懂 为什么呢 呜呜。。。 西门 到底吹不吹雪呢 😥
我感觉我说得很清楚了吧,要不然你用第一种“菜鸟型”算啦 😈
学习了,谢谢博主
跳过前两条,直蹦偷懒型而去 🙄
看见6哥在万哥博客发的软文了,看来最近炒作Google更新PR赚了不少钱啊!
赚个话费钱 😈
话费钱,那证明6哥每个月的话费是成千上万啊 🙄
唉,我是一看到代码就头疼
6哥也玩外链? 😳
好东西,以前一直也是想用引用就能表达,原来不行阿
我试了blockquote标签和code标签都不行,所以才问别人,原来还有引用代码插件,我也是第一次听说,呵呵 😈
目前可能还不需要这个插件咯
你博客比较娱乐,这插件适合折腾代码的朋友。
学习了,初次来..互踩
抱歉,对贵博客做热门关键字不感冒
从不贴代码 = = 🙄
呵呵,这插件也不是为所有博主准备的 ❗
喜欢自己diy的效果
嗯,和别人的不一样才好玩嘛 ❗
我怎么看你旁边的微博就在不停的转,一直显示数据正在加载啊~ ➡
那个提供API的网站打不开了,不知道是不是树大招风,明天再找几个其他朋友做的API试试
这皮很眼熟啊,支持你的博,路过就留言~~
呵呵,木木的,应该很多人在用吧。
一个新的折腾帝就此诞生 点评完毕!
我还没有,等我学会了PHP再这样称呼!
貌似没考虑转义符的问题?加上一个 esacaped=”true” 更合适
哪个地方需要转义符?我草鸟,况且这篇文章写了好久了。 ➡
代码中遇到尖括号或者双引号,不就被转义了么?
我还特地为此写了个wlw插件http://imtimmy.com/wp-syntax-quick-insert/
所以我在文章里面说了一句“但是此款插件不支持从“HTML”模式下切换到“可视化”,不然代码都会运行,所以建议大家先写完文字和图片,最后切换到“HTML”模式下来贴代码。”,暂时还没有更好的啊 ❓
额,手太快打错了,escaped
我也用的这款插件~
不能切换确实是硬伤。。。
不过如果自动转译,又代码高亮,那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了好久了,希望你能找到更好的方法。
我就是那偷懒型,前几天刚弄上,第一次过来就看到一样的方法,不错~
其实我也是需要这东西,然后到处找,才找到方法的。 😈
呵呵 这段修改很不错 用html编辑模式 很方便的说
一直在找可以在可视化和代码两界面切换的,那样更方便了 😈
假装百度来这里,嘻嘻
这个好
其实是支持 HTML 变色的。
写 html 是错误的 应该写成 html4strict
官方文档里面有的
wp3.3.2不好用了,这个方法不管用了。。文件内容都变了
好久没折腾这个了,我都是手写标签来引用代码……
个人不建议用这类使用font渲染颜色的插件或修改,你可以看看你的源文件,前端体验是不错,但SEO的体验比较差,自用的:http://www.dongqinjing.com/firefox-scroll-bar-style/,直接用pre固定样式和禁止解析就可以了。
escaped="true"