wordpress代码高亮插件WP Code Highlight发布

2011-09-26 | 夜光 | IT记录| 发表评论

==WP Code Highlight插件简介==

WP Code Highlight | Download» |,它是一个用于在wordpress中插入代码并提供代码高亮的插件,且符合W3C验证标准,你只需要将代码放在<pre></pre>中间即可,插件可以自动识别你所粘贴代码的语言并高亮,所以不需要额外指定语言,使用起来更方便,WP Code Highlight还可以在wordpress的Html编辑器插入一个名为“WP-Code-Highlight”的按钮,方便你插入代码,其实就是方便你插入一个pre标签,另外如果你以前是使用WP-Syntax的,不用担心,你现在仍然可以使用原来的方法插入代码,WP Code Highlight完全兼容WP-Syntax的代码插入风格,因为我自己原来也是用它的,但是它太大了,非常消耗资源,所以自己开发了这个轻便的,并做到插件过渡无忧。WP Code Highlight使用的是轻便的Google Code Prettify代码着色库。我们可以在插件设置页面开关行号,也可以更换代码高亮主题或随机显示高亮主题。感谢荒野无灯帮助纠正Bug。当你万一需要卸载此插件时,WP Code Highlight会自动删除在数据库中的设置数据,做到绿色无污染。

==WP Code Highlight插件安装与使用==

(1)下载后解压得到wp-code-highlight文件夹,上传至 /wp-content/plugins/ 目录,然后在后台“插件”那里启用。

(2)因为wordpress的可视化编辑器会将代码来回转义,所以最好禁用,方法:登入后→用户→点击你的帐户→把第一个选项勾上“禁用可视化编辑器”

(3)对插件进行个性化的设置,方法:登入后→设置→WP Code Highlight

(4)写文章时将代码放在<pre></pre>中间即可(Html编辑器中已经提供了一个名为WP-Code-Highlight的按钮,方便你插入代码)。

(5)如果你以前是使用WP-Syntax的,你现在仍然可以使用原来的方法插入代码,WP Code Highlight完全兼容WP-Syntax的代码插入风格。可以保证你过渡无忧。

(6)“Code Button”:勾选“enable”则在Html编辑器中插入一个名为“WP-Code-Highlight”的按钮,方便我们插入代码。

(7)“Highlight Themes”:可以选择4种不同的代码高亮主题,也可以勾选“random”则随机显示代码高亮主题。另外,WP Code Highlight支持在当前wordpress主题文件夹中寻找“wp-code-highlight.css”文件,如果wp-code-highlight.css存在则会自动调用。所以如果你对样式不满意想自己定制,只需要自己写一个wp-code-highlight.css文件放入当前你使用的wordpress主题文件夹即可,写法可参考插件文件夹css目录中的wp-code-highlight.css文件。

(8)“Line Numbers”:勾选“enable”则显示代码行号,勾选“disable”则不显示代码行号。

(9)“Delete Options”:勾选后可以在禁用此插件时自动删除在数据库中的设置选项,做到绿色化。

==WP Code Highlight代码高亮演示==

文章或评论中输入:

<pre>
#include<iostream>
using namespace std;
void main(void)
{
  cout<<"Hello World"<<'\n';
}
</pre>

前台显示的高亮效果:

#include<iostream>
using namespace std;
void main(void)
{
  cout<<"Hello World"<<'\n';
}

==FAQ常见问题解答==

① 哪些角色可以在文章中贴代码?
答:只有角色为“管理员”的用户可以,用pre标签包裹代码即可。wordpress对角色非管理员的用户进行了输入限制,比如含PHP尖括号的代码在保存数据库之前就已经被处理掉,这是为了安全考虑,而对于管理员则没有输入限制,只是在前台显示时进行处理,此时代码高亮插件的作用就发挥出来了,可以避免管理员的代码在前台显示时被处理掉。

② 哪些角色可以在评论中贴代码?
答:依然只有角色为“管理员”的用户可以,用pre标签包裹代码即可。对于非管理员或普通访客都不行,理由同上。有人也许会好奇我下面的评论框为什么任何人包括访客都可以贴代码,这个不是插件的功能,处理起来相当麻烦。

③ 为什么没看到“代码按钮”?
答:代码插入按钮显示在HTML编辑器,名为“WP-Code-Highlight”,其实就是方便你插入pre标签。对于经常需要贴代码的朋友建议你禁用可视化编辑器,方法上面有,因为来回切换会将代码来回转义,凌乱不堪,而且可视化编辑器写出的文章源代码冗余繁杂。而HTML编辑器写出的文章源代码则整洁规范。

④ WP Code Highlight插件支持哪些编程语言?
答:提出这个问题的朋友估计都是被其它的代码高亮插件折腾烦了,因为其它的插件都需要一堆标签属性,很欣慰地告诉你,在WP Code Highlight插件中不存在支不支持哪种语言的说法,不需要指定语言,所有的编程语言都支持,只要pre标签包裹就行,因为原理就是先让pre标签包裹的代码能在前台正常显示,然后再采用js对语法特征进行着色,语言种类的不同对于这个插件来说仅仅是着色不同而已,对于“类似C、类似Bash、类似XML”风格的编程语言着色很丰富,其它风格的编程语言仅仅是着色略显单调而已,不影响代码正常显示。这也正是我开发这个插件的初衷,就是为了使用方便。

==WP Code Highlight插件后台设置界面截图==

WP Code Highlight

==WP Code Highlight插件下载(Download)==

(Download)WP Code Highlight插件WordPress官方下载 »

WP Code Highlight插件WordPress官方页面 »

本文标签: ,,
本文链接: http://boliquan.com/wp-code-highlight/
版权所有: 玻璃泉, 转载请注明本文出处。

31个评论

  1. 换上了,的确不错!!

  2. Excuse me, I just want to try the code alway use at my blog.

    <p style="font-family: Amiri; font-size: 25px; direction: rtl; text-align:justify;"> Write Your Text  Here</p>
    

    ——
    Wow It’s work here as I need.
    But, how do you make this comment form can be edited without log in?
    Thanks and I’m sorry I can’t speak with your language.

    • @msrosyidi
      Sorry,only the logged-in administrator can insert code,the effect you see on my blog is not the function of this plugin. It’s too complicated so I can’t explain it clearly.

      • @夜光
        Do you know if there are plugins or tutorials to make the comment form like here? It’s very beautiful.
        I only need the ability of inserting code (without losing the security of course) by unlogin user, creating a special button (like the button “code”) for inserting code and my unique shortcode.
        Many Thanks again.

  3. 我在使用您的插件,在IE 10下,显示的代码似乎断行出现了问题,都在一行显示了。 在chrome下测试是没有问题的,请问您可以解决这个问题吗?

  4. 嗯哼,这个真的不错,主流的代码高亮插件都太臃肿了。

  5. 因为wordpress的可视化编辑器会将代码来回转义,所以最好禁用,方法:登入后→用户→点击你的帐户→把第一个选项勾上“禁用可视化编辑器”

    有什么方法禁用这种自动转义,我已经被他搞疯了。

  6. Google Reader订阅的rss输出中没有效果,应该怎么设置

  7. 关于:wordpress对角色非管理员…比如含PHP尖括号的代码在保存数据库之前就已经被处理掉,这是为了安全考虑,…此时代码高亮插件的作用就发挥出来了,可以避免管理员的代码在前台显示时被处理掉…

    我确定是admin身份,尖括号”在pre中还是被处理了,而且保存之前却是被处理了! :mrgreen:

    每次需要纯HTML模式编辑,不能切换到可视化模式,否则,html标签会被直接吞掉,非html标签的尖括号会被转换>等输出到页面。

    :sad: 望博主帮忙解决下,顺便email我下,感谢!!!

评论分页: 1 2

发表评论

您的昵称 *

您的邮箱 *

您的网站

icon_wink.gif icon_neutral.gif icon_mad.gif icon_twisted.gif icon_smile.gif icon_eek.gif icon_sad.gif icon_rolleyes.gif icon_razz.gif icon_redface.gif icon_surprised.gif icon_mrgreen.gif icon_lol.gif icon_idea.gif icon_biggrin.gif icon_evil.gif icon_cry.gif icon_cool.gif icon_arrow.gif icon_confused.gif icon_question.gif icon_exclaim.gif

Protected by WP Anti Spam