原理:文档加载完成以后运行相关函数修改所有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()
暂时没做出高亮,而且还有些小小的问题。就先摆在这里了。
另外谁可以告诉我最后总有一个空行是肿么回事捏?
后期可能有改动,文章就不改了,详见源代码。