一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

wordpress中代码高亮插件Highlight安装与使用

时间:2014-02-11 编辑:简简单单 来源:一聚教程网


插件下载地址:http://file.111com.net/upload/2014/2/wp-code-highlight.zip

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

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

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

(4)写文章时将代码放在

中间即可(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代码高亮演示==

文章或评论中输入:


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

前台显示的高亮效果:

#include
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”风格的编程语言着色很丰富,其它风格的编程语言仅仅是着色略显单调而已,不影响代码正常显示。这也正是我开发这个插件的初衷,就是为了使用方便。

热门栏目