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/
版权所有: 玻璃泉, 转载请注明本文出处。

44个评论

  1. 哥们,有点报错,在我的主题下,你默认替换了全局的pre标签,我的评论模块使用了pre标签也被替换了!!。。导致报错。。http://jalena.bcsytv.com/archives/1144这是链接,你看看哪!

    现在我清除了 // add_filter(‘comment_text’, ‘wp_code_highlight_filter’, 2); 这段就正常了,你检查下代码呢!

    • @jalena
      这是你主题的问题,因为管理员在评论中也可以贴代码的,当然其中的pre标签也要替换!贴个代码给你示范一下:

      add_filter('comment_text', 'wp_code_highlight_filter', 2);
      
  2. 使用“CKEditor for WordPress”编辑器,HTML编辑器中不显示“WP-Code-Highlight”;而使用“CK and SyntaxHighlighter”编辑器,HTML编辑器中“WP-Code-Highlight”及那一排按钮全部使用无效

    • @孙柄晨
      这个插件初衷就是为了原生的HTML编辑器的,类似的插件还有wp-syntax,都是提倡禁用可视化编辑器的。毕竟HTML文本编辑器出来的代码比较规范简洁。

      • @夜光
        原生的功能真心好少,毕竟我代码发的少。百度编辑器功能挺多的,只可惜貌似百度不更新wordpress的了

  3. It’s a wonderful plugin, thank you very much for putting it together! I’m using it on a couple of sites where I post code a lot.

    All the best from Miami Beach!

  4. 请看一下我的页面,为啥出边界了?怎么修改呢?

    http://www.html5ecommerce.com/word-splitting-html5.html :?:

  5. hello,我用你的插件之前一直是好的,后来不知为何就没有高亮效果了。。。只有防止pre内标签被浏览器识别的功能还有效(主题是官方的2014主题)

  6. 可惜是WordPress。

评论分页: 1 2 3

发表评论

您的昵称 *

您的邮箱 *

您的网站

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