代码高亮显示插件+DIY按钮

/ 29评 / 0

昨天发布的那篇文章因里面放置的代码过多,显示出来非常乱,不易于阅读。我知道其他部分博客上的代码高亮显示是用插件来解决的,现在我也迫不得已用上了。上网搜了一下,发现使用WP-CodeBox和WP-Syntax的居多,比较了一下,WP-CodeBox功能强大,设置选项也很多,而WP-Syntax比较简单,实现了基本功能,而且WP-Syntax的颜色样式更加符合我的主题,于是就选了后者。先贴出插件相关

WP-CodeBox语法:

<pre lang="LANGUAGE" line="N" file="download.txt" colla="+或-"> 代码内容</pre>.

lang="LANGUAGE" : LANGUAGE代表代码的语言,如ASP、PHP、Java等。

line="N" :开始行数。

file="download.txt" : 创建一个可下载的保存名称,这里的download.txt表示是下载文件的文件名。

colla="+或-" : +“表示显示时展开代码,”-“表示显示时收缩代码。

wp-codebox使用方法:

在插入代码前,将wordpress 编辑器切换为“HTML编辑”模式,按上面语法插入代码即可!

WP-CodeBox插件示例代码

<pre lang=“php”>
ecs_header(“Location: ./ “);
exit;
</pre>

以下是插件实现:

ecs_header(“Location: ./ “);
exit;

WP-Syntax的语法相对比较简单了:

<pre lang="LANGUAGE" line="1">代码内容</pre>

接下来问题出现了:我在测试WP-Syntax的时候,发现每次都要手动输入代码来实现格式化,感觉这样非常繁琐!想到之前做JSP的时候弄过文本编辑器,那能不能在编辑器里加一个按钮呢?在后台查看发布日志的页面源码发现编辑器上的按钮调用的是\wp-includes\js\quicktags.js这个文件,刚打开就一阵眩晕,密密麻麻的代码,没有分行,没有空格,如同乱码一般。还好用的是Notepad++开源免费的代码编辑器,能显示不同颜色,很快发现了<blockquote>、<code>、<li>这些标签,在文件中显示如下:

edButtons[edButtons.length]=new edButton("ed_block","b-quote","\n\n<blockquote>","</blockquote>\n\n","q");

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

edButtons[edButtons.length]=new edButton("ed_li","li","\t<li>","</li>\n","l");

很明显他们都是同样的格式,那么我们也可以复制一条插入到code代码的后面,再修改为WP-Syntax的显示格式,如:

edButtons[edButtons.length]=new edButton("ed_php","php","<pre lang="php">","</pre>","php");

edButtons[edButtons.length]=new edButton("ed_css","css","<pre lang="css">","</pre>","css");

edButtons[edButtons.length]=new edButton("ed_java","java","<pre lang="java">","</pre>","java");

添加好后进入wp后台发布日志,插入代码。选中代码。点相应设置的按钮,就自动把要添加的代码格式化啦哈!

 

 

  1. OnC说道:

    DIY按钮好喜欢~有空自己在文章编辑器上折腾个表情框出来,方便写文章 :嘻:

  2. freetstar说道:

    学习了~用的是一个synaxhighlighter的插件,不太好使

  3. 西门说道:

    西门 :
    呵呵,博主是新手?版权都忘记了。不写我的也要写邪罗刹的版权呀!
    [回复]

    sorry,貌似我弄错了,抱歉,当我没说。不过建议尊重原作者的版权。

  4. 西门说道:

    呵呵,博主是新手?版权都忘记了。不写我的也要写邪罗刹的版权呀!

  5. 集思说道:

    我都不用插件来实现代码高亮的。

  6. 闲云野鹤说道:

    我用的是CodeColorer这个插件,我自己修改了下里面的css,来融合我主题.关键是他符合W3C标准! :嘻:

  7. 岸边说道:

    每次来都能有学习的地方 :嘻:

  8. Jethro说道:

    好困啊。。

  9. glwzu说道:

    :纠结: 看出HTML编辑多php、css、java。

  10. A.L说道:

    准备转载了,转载到哪里不告诉你 :偷笑:

  11. cn说道:

    学习了

  12. WordPress啦说道:

    我不熟悉Div+CSS 杯具了,改了啥东西都不会!

  13. 阿邙说道:

    板凳 我准备放弃掉高亮插件了

  14. 小松说道:

    哇,沙发哦~最近折腾wp蛮多的嘛~加油哦~

    • hesiway说道:

      @小松 @小松, 为什么会有这么快~我都订阅到google reader,发现更新看到评论已是一大堆了~

Comments have been closed.