首先，先解释一下这篇文章的标题，为什么后面要加个（可用），因为确实可用，再次提醒大家不要到处百度了，百度上的网站都是互相抄袭，一搜一大堆，内容都是一样，一样没关系，关键是一个都用不了，给了搜索者带来了很多麻烦，还怀疑自己技术有问题；有点用的也存在诸多问题，比如说代码溢出框外，js错误，还有的网站真的就是完完全全的抄袭，连自己都不知道这些代码怎么用，在自己的网站上都不会操作，他还写得有声有色，拿别人去做白老鼠。一些重要细节也忽略了,还有的呢就是输入框样式不尽如人意....不多说了，说多了都是泪啊！
下面是见证奇迹的时刻，请跟随我的脚步。
首先在自己的functions文件中适当位置（这个适当位置建议php函数结束符号前，即?>的前面一行）加入以下代码，顺便做这个代码框的演示
————————————————把以下代码加到functions里去—————————————————
function textarea($atts, $content = null) {
return '<script src="js文件地址" type="text/javascript" charset="utf-8"></script>
<form>
<div align="center">
<textarea id="code" style="width:555px;height:200px; border:1px solid #ff0000;" cols="80" rows="15">'.$content.'</textarea>
<br />
<input type="button"onclick=runCode(code) value="运行代码" style="border:1px solid #B1B4CD;background:#556b2f;color:#FFF; padding-top:5px;">
<input type="button"onclick=copycode(code) style="border:1px solid #B1B4CD;background:#556b2f;color:#FFF; padding-top:5px;"value="复制代码" onclick="copycode(runcode3)">
<input type="button"onclick=saveCode(code) style="border:1px solid #B1B4CD;background:#556b2f;color:#FFF; padding-top:5px;"value="另存代码" onclick="saveCode(runcode3)">
提示：可以先修改部分代码再运行</div>
</form><br>';}
add_shortcode("code", "textarea");
————————————————————代码运行框演示——————————————————
其中的第二行的js文件地址自己下载后上传到自己的网站空间，获取绝对地址（带http://的）代替“js文件地址”
至此所有步骤都完成了，剩下的就是使用方法了，看招
只要在你的博客编辑文章时手动输入[-code]你的代码[-/code]并在“你的代码”处粘贴你要向读者呈现的代码发表就行了，就会显示如我上面的效果。去掉前面的横杠-，这是我让它不显示做的干扰
注意：不要看错了，是[-code]而不是博客里面自带的<code>，搞错了是不行的。。。
差点忘了把js文件提供给大家：点击下载
_____________________________________________________________________________
好，问题又来了，有问题就有解决方案嘛，到底是什么问题呢，大家在使用代码运行框的时候，可能会遇到，代码框里面的代码并非完完全全自己粘上去的代码，你在发表的瞬间wordpress会自动加入一些换行代码</br>,如
这些新加入的代码可能会影响代码的运行，所以如何屏蔽wordpress擅做主张需要在functions文件里（建议在运行框代码下面）加入以下代码
function my_formatter($content) {
$new_content = '';
$pattern_full = '{([-raw].*?[-/raw])}is';
$pattern_contents = '{[-raw](.*?)[-/raw]}is';
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
foreach ($pieces as $piece) {
if (preg_match($pattern_contents, $piece, $matches)) {
$new_content .= $matches[1];
} else {
$new_content .= wptexturize(wpautop($piece));
}
}
return $new_content;
}
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
add_filter('the_content', 'my_formatter', 99);
把raw前面的“-”去掉，使用方法就是在你不想要wordpress自动擅自加入代码的区域用[-raw][-/raw]包围起来。（同样要去掉横杠-）
这样的话你粘贴进去的代码就是完完全全你的代码了。
注：编辑代码必须在html模式下编辑，否则还会加上</br>的，最好就只加一组，多了它就乱了，以致使某些起不到效果，如最后的那个运行框，被前面着色代码raw截取了。