快速使用CoolCode-WordPress代码着色插件

第一次发布还失败了,原因是代码里有coolcode标签,结果让编辑器给替换了 :( 再发一次,这次把coolcode标签替换成mycodes,实际使用中要替换回来。

今天为WP增加了一个插件CoolCode,作用就是让内容里的代码能够高亮显示,经常写些程序代码,但是以前只是普通的文字,没有相应的颜色,有了这个插件,写出来的代码加上颜色,就好看多了。

经过测试,在编辑器Visual模式下写的代码不能被正常的的解析,只有在HTML模式下写出来的代码才能被正常的解析到。然而每次都要写上<mycodes lang=”javascript”></mycodes>,虽然字数不多,但是像这样简单的代码就懒得写了,于是,决定在HTML模式下,增加一个快捷按钮,就像已有的link,code一样,点击一下,输入几个参数就可以了。

CoolCode有三个参数,lang,指定被包含的程序代码是哪种语言,支持actionscript cpp css diff dtd html java javascript mysql perl php python ruby sql xml;linenum,指定是否显示行号,值是true或者false,默认是true;download,指定要下载的文件的路径加文件名。这三个参数都是可选的。了解了这些,就开始写代码了。

首先是在“wp-includesjsquicktags.js”里进行修改,
添加要显示的按钮:

edButtons[edButtons.length] =
new edButton(‘ed_coolcode’
,’mycodes’
,”
,'</mycodes>’
);

将这个按钮增加到“edShowButton”函数里:

function edShowButton(button, i) {
if (button.id == ‘ed_img’) {
document.write(‘‘);
}
else if (button.id == ‘ed_link’) {
document.write(‘‘);
}
else if(button.id == ‘ed_coolcode’) {
document.write(‘‘);
}
else {
document.write(‘‘);
}
}

因为这个按钮需要接收弹出框的信息,所以要单独写。
然后添加按钮点击触发的函数:

function edInsertCoolCode(myField, i, showprompt){
/*
*Function: Quick insert CoolCode For WordPress HTML Edior
*Author: Jena.want | www.AOBODO.com | 2008-7-16 0:20:11
*Parameter: showprompt [true/false] if set true then editor will show prompt
*LastModify: 2008-7-16 0:20:23
*/
if (!edCheckOpenTags(i)) {
if(showprompt){
var ccLang = prompt(‘Language, nLike: actionscript cpp css diff dtd html java javascript mysql perl php python ruby sql xml’, ”);
var ccLineNum = prompt(‘Line number, On or Off, default value is On’, ‘on’);
var ccDownload = prompt(‘Download file, nLike: http://www.maydomain.com/folder/file.rar’, ‘http://’);
}
var myValue = ‘<mycodes ‘;
if(ccLang){
myValue += ‘ lang=”‘+ ccLang +'”‘;
}
if(ccLineNum || ccLineNum == ‘on’){
myValue += ‘ linenum=”on”‘;
}else if(ccLineNum == ‘off’){
myValue += ‘ linenum=”off”‘;
}
if(ccDownload && ccDownload!=’http://’){
myValue += ‘ download=”‘+ ccDownload +'”‘;
}
myValue += ‘>n’;
edButtons[i].tagStart = myValue;
edInsertTag(myField, i);
}else{
edInsertTag(myField, i);
}

}

其中第三个参数“showprompt”控制是否弹出输入框,传递false就不弹出了。还有就是弹出框的提示信息,本来应该放到“wp-includesscript-loader.php”里的,我这里就直接写在函数里了,懒了 :)

好了,这样就可以方便的使用了。

Leave a Comment

Your email address will not be published.

*