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

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

==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>中间即可（已经提供了一个名为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';
}

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

WP Code Highlight

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

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

WP Code Highlight插件WordPress官方页面 »

上一篇: 使用mb_strimwidth函数时不读取加密文章摘要的方法下一篇: 利用.htaccess文件提升网站访问速度

13个评论

superphper
回复 | 2011年12月11日 14:45

遗憾的是不能在可视化和HTML之间切换代码总被转义
- 夜光
  回复 | 2011年12月11日 18:28
  
  可视化编辑器会出现很多问题，如果经常贴代码的话，建议禁用可视化编辑器，否则以后修改代码或者更换高亮插件等都是问题。
grus
回复 | 2011年12月16日 19:44

Hi,

I tried to find the answer to my question, but I could not. So I thought I ask here: can I change the background color of the codeblock? Not the default one, just sometimes I need other colors to make difference between different type of codes.

Thanks,
grus
- 夜光
  回复 | 2011年12月17日 18:14
  
  @grus
  Hi,
  You don’t need to specify the language since WP Code Highlight will guess. You just need to wrap your code blocks with <pre> and </pre>. If you want to change ‘Highlight Themes’,you can follow the steps:”Settings”->”WP Code Highlight”->”Highlight Themes”,then you can choose the style you like.
weyoung
回复 | 2012年01月09日 13:51

我在用这个插件，不过我现在找不到可以添加标签的按钮啊，然后我手动进wp-code-highlight-admin.php里面改代码还是找不到按钮~好奇怪，我也没有你们所说的插件设置选项~
- 夜光
  回复 | 2012年01月09日 16:51
  
  @weyoung
  你首先正确启用插件，然后在后台依次点击“设置”“WP Code Highlight”然后你就可以看到这个插件的设置选项，“代码按钮”是指在你写文章时会看到Html编辑上多了一个以“WP Code Highlight”命名的按钮，可以很方便地帮助你将代码包裹在pre标签中，如果还不明白可以联系我~
  - ethanchen
    回复 | 2012年03月11日 14:11
    
    @夜光
    开启了代码按钮，还是没出现。且不能在可视化和HTML之间切换确实很遗憾。
    - 夜光
      回复 | 2012年03月19日 06:59
      
      @ethanchen
      代码按钮在Html编辑器，你说的“在可视化和HTML之间切换”这个功能即使有也不建议使用，对于经常贴代码的人来说，保持代码的完整性最重要，来回转义终究会出问题，建议禁用wordpress的可视化编辑器，方法：登入后→用户→点击你的帐户→把第一个选项勾上“禁用可视化编辑器” 你会发现HTML编辑器(QuickTags)是那么纯净
KingGoo
回复 | 2012年04月14日 14:37

你这个插件不支持bash是吗？在我那里把”"”;”&” 都转译成html编码了???
- 夜光
  回复 | 2012年04月14日 14:54
  
  @KingGoo
  支持bash，代码在HTML编辑器中用pre标签包裹，不存在不支持哪种语言的说法，语言种类只是高亮的颜色不同而已，看下面，乱写个代码给你演示一下，很正常：
```
#!/bin/bash
make && make install
if [ "$ver" = "old" ]; then
echo "example"
```
Legend1988
回复 | 2012年05月10日 13:16

你好！非常喜欢你的这个插件，这两天自己写了一个主题用你的插件的时候，原来代码的颜色效果没有了，但代码被框出来的效果还是有的，不知道是为什么？网站还没上线，所以没法写网址。谢啦~
Legend1988
回复 | 2012年05月10日 16:42

夜光，你好！中午的留言不见了。我自己写了一个主题后代码不高亮了，之前用其他主题是正常的啊~
- 夜光
  回复 | 2012年05月10日 18:39
  
  @Legend1988
  这说明你的主题写法不标准，①头部header.php的head标签之前必须有wp_head() ②底部footer.php被包含到诸如single.php、page.php中的时候要使用get_footer()函数；你的留言不见了是因为你的邮箱没有申请Gravatar头像，被我的插件WP Anti Spam放进垃圾评论里面了。

玻璃泉