给wordpress加上了个代码显示函数

原理:文档加载完成以后运行相关函数修改所有code标签

首先要做一件事,把加载文章的php的一个函数修改一下,阻止其给code标签内自动把\n换行替换成<br>标签(这个问题苦了我好久吖╮(╯3╰)╭),函数名wpautop,此函数位于/wp-includes/formatting.php中,找到这个函数里的
$pee = preg_replace_callback('/&lt;(script|style).*?&lt;\/\\1&gt;/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,"&amp;");
	string  =  string.replace(/</g,  "&lt;");
	string  =  string.replace(/>/g,  "&gt;");
	string  =  string.replace(/ /g,  "$nbsp;");
	string  =  string.replace(/\'/g,  "&apos;");
	string  =  string.replace(/\"/g,  "&quot;");
	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()

暂时没做出高亮,而且还有些小小的问题。就先摆在这里了。
另外谁可以告诉我最后总有一个空行是肿么回事捏?
后期可能有改动,文章就不改了,详见源代码。



本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。