这两天要连载从零开始自学HTML系列，文章中会出现一系列代码，但是需要自己写代码并自己写效果。麻烦不说主要太费时间。而且网页文章代码中不能出现尖括号<>，需要转换为实体字符<>才能显示。

我在网上找了一串代码，可以在Wordpress中显示一个代码运行框，点击就能直接运行，显示效果。给我的教程带来很大的帮助。

Wordpress中添加代码运行框的方法

主要修改：function.php，js文件夹

1. 直接在下方下载run-code-OL.js文件夹，并上传到主题所在JS文件夹。如DUX主题中所在文件夹为根目录/wp-content/themes/dux/js/，其他主题大同小异。

2. 在dux主题中找到function.php文件，并将如下代码添加至文件尾部。

/**添加可运行代码框*/
function textarea($atts, $content = null) {
return '<script src="'.get_template_directory_uri() . '/js/run-code-OL.js" type="text/javascript" charset="utf-8"></script>
<form>
<div align="center">
<textarea id="code" style="width:100%;height:255px;" cols="80" rows="15">'.$content.'</textarea>
<br />
<input type="button" onclick=runCode(code) value="运行代码" style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;">
<input type="button" onclick=copycode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;" value="复制代码" onclick="copycode(runcode3)">
<input type="button" onclick=saveCode(code) style="border:1px solid #B1B4CD;background:#696D81;color:#FFF; padding-top:5px;" value="另存代码" onclick="saveCode(runcode3)">
<br/>注意：如需评论后运行请重新刷新页面</div>
</form><br>';}
add_shortcode("code", "textarea");

3. 编辑文章的时候，切换到HTML模式，然后在代码前后插入[-code]与[-/code]即可。

编写代码时将code前的-去掉。

最终会在页面中显示一个代码框，可以用来运行代码，另外两个按钮复制代码和另存代码在部分浏览器中无法使用。

如浏览器显示错误，请尝试更换浏览器。

代码效果显示：
[code]

html页面标题