WordPress短代码实现文章内运行HTML代码

首先看看效果：

将以下代码放至主题目录下functions.php下，即可使用【code】【/code】短代码嵌套html代码的方式来运行html文件了

/**添加可运行代码框*/ 
function textarea($atts, $content = null) { 
return '<style>
textarea {
	width: 100%;
	border: 0 none;
	overflow: auto;
	resize: none;
	outline: none;
}
a {
	color: #333;
	text-decoration: none;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	font-family: verdana,Microsoft YaHei,Tahoma,sans-serif;
}
.content .textbox {
	
	right:0;
	left:0;
	padding-left:5px;
	border:1px #d1d1d1 solid;
	
	background: url(/wp-content/themes/dux/img/inpbg.png) #fff no-repeat;
	overflow:hidden;
	
	
}
.content {
margin-bottom: 40px;
}
.content .textbox div textarea {
	padding:5px 0;
	width:100%;
	background: url(/wp-content/themes/dux/img/inpbg.png) no-repeat -4px 0;
}
.content .btnbar {
	float:right;
padding-top: 12px;
}
.btns {
	display:block;
	margin-right:8px;
	width:80px;
	height:38px;
	line-height:38px;
	font-size:14px;
	text-align:center;
	border:1px #cacaca solid;
	border-radius:2px;
	background: url(/wp-content/themes/dux/img/btn_bg.png) repeat-x;
	float:left;
	font-family: verdana,Microsoft YaHei,Tahoma,sans-serif;
}

.btns:hover {
	border:1px #a4a4a4 solid;
	background-position:0 -40px;
	text-decoration:none;
}
.btns:active {
	background-position:0 -80px;
}
.btns.hilite {
	color:#f15214;
	border:1px #ffc88b solid;
	background-position:0 -120px;
}
.btns.hilite:hover {
	border:1px #f60 solid;
	background-position:0 -160px;
}
.btns.hilite:active {
	background-position:0 -200px;
}
.btnbar a {
	text-decoration: none;
}
.btnbar {
	padding-bottom: 50px;
}
.content #code textarea {
	height:430px;
}
#single {
	padding-bottom:45px;
}
</style>
<script>
(function() {
	window.onload = function() {
		var e = "将HTML代码粘在此处，点击运行即可。",
			t = document.getElementById("codeinp"),
			n = document.getElementById("btclear"),
			r = document.getElementById("btrun");
        if(t.value == ""){
        	t.value = e;
        }
		t.onfocus = function() {
			var n = t.value;
			n == e && (t.value = "")
		},
		t.onblur = function() {
			var n = t.value;
			n == "" && (t.value = e)
		},
		n.onclick = function() {
			t.value = "",
			t.focus()
		},
		r.onclick = function() {
			var n = t.value;
			if (n != e) {
				var r = window.open("", "", "");
				r.opener = null,
				r.document.write(n),
				r.document.close()
			} else alert("请将需要运行的HTML填写到输入框后再运行！", "alert", "运行提示")
		}
	}
})()
</script>
	<div id="code" class="textbox">
		<div><textarea id="codeinp">'.$content.'</textarea></div>
	</div>
	<div class="btnbar cl">
		<a id="btclear" class="btns" href="javascript:void(0);" hidefocus="true">清空</a>
		<a id="btrun" class="btns hilite" href="javascript:void(0);" hidefocus="true">运行</a>
	</div>
    <div id="single"></div>
';
} 
add_shortcode("code", "textarea"); 

按钮及边框样式图标自己挖~