原理:文档加载完成以后运行相关函数修改所有code标签
首先要做一件事,把加载文章的php的一个函数修改一下,阻止其给code标签内自动把\n换行替换成<br>标签(这个问题苦了我好久吖╮(╯3╰)╭),函数名wpautop,此函数位于/wp-includes/formatting.php中,找到这个函数里的
`$pee = preg_replace_callback(‘/<(script|style).*?<\/\\1>/s’, ‘_autop_newline_preservation_helper’, $pee);`
这一行,括号里加上|code,变成这样:
`$pee = preg_replace_callback(‘/<(script|style|code).*?<\/\\1>/s’, ‘_autop_newline_preservation_helper’, $pee);`
【这要怎么理解呢。。应该就算是不进行修改的标签列表吧】
然后一切就都方便了,给onLoad加上自己的code处理函数。
以下是我的code处理函数:
function tolist(string, width) {
if (width == "") {
width = "auto";
}
var codelist = '<div style=\'background-color:#fff;overflow:hidden;width:' + width + ';max-width:' + width + ';word-wrap:break-word;word-break:break-all;word-wrap:break-all;display:block;margin:0px;font-family: "微软雅黑";\' ><div style="color:#CCCCCC;font-size:13px;background-color:#fff;width:100%;height:20px;font-weight:900;">Code:</div><ol style="margin:0px;background-color:#E7E7E7;border:1px solid #CCCCCC;padding-left:50px;color:#00CC33;">';
//string=string.replace(/&/g,"&");
string = string.replace(/</g, "<");
string = string.replace(/>/g, ">");
string = string.replace(/ /g, "$nbsp;");
string = string.replace(/\'/g, "'");
string = string.replace(/\"/g, """);
string = string.replace(/<br\/>/g, '<span style="color:#999999;"><br/></span>');
var code = string.split("\n");
for (var i = 0;; i++) {
if (code[i] == "" || code[i] == " ") {
code[i] = null;
}
else {
break;
}
}
for (var i = code.length; i > 0; i--) {
if (code[i] == "" || code[i] == " ") {
code[i] = null;
}
else {
break;
}
}
for (var i = 0; i < code.length; i++) {
if (code[i] == null) {}
else {
codelist = codelist + '<li style="font-size:13px;"><div style="border-left:1px solid #999;display:block;margin-right:0px;background-color:#fff;width:auto;min-width:60px;position:relative;color:#000;">' + code[i] + ' </div></li>';
}
}
codelist = codelist + '</ol></div>';
return codelist;
}
function findcodetag() {
return document.getElementsByTagName("code");
}
function changecodetag() {
var a = findcodetag();
for (var i = 0; i < a.length; i++) {
var code = a[i].innerHTML;
a[i].innerHTML = tolist(code);
}
}
然后onLoad加上changecodetag()
暂时没做出高亮,而且还有些小小的问题。就先摆在这里了。
另外谁可以告诉我最后总有一个空行是肿么回事捏?
后期可能有改动,文章就不改了,详见源代码。