零基础建站培训教程介绍

当前位置:

网站怎么添加在线代码运行功能

在一些教程网上面有这样的功能,就是一段代码下面有一个“运行代码按钮”,点击这个按钮就可以在线运行这段代码,看到实际效果。这就是在线代码运行功能。如下图:

网站怎么添加在线代码运行

怎么在自己做网站时,制作这样的在线代码运行功能呢?下面学做网站论坛就是WP程序为例,介绍一下制作方法。

第一步:将以下PHP代码添加至当前主题的 functions.php 文件中:


// 运行代码功能PHP脚本
$RunCode = new RunCode();
add_filter('the_content', array(&$RunCode, 'part_one'), -500);
add_filter('the_content', array(&$RunCode, 'part_two'), 500);
unset($RunCode);
class RunCode
{
var $blocks = array();
function part_one($content)
{
$str_pattern = "/(\<runcode(.*?)\>(.*?)\<\/runcode\>)/is";
if (preg_match_all($str_pattern, $content, $matches)) {
for ($i = 0; $i < count($matches[0]); $i++) {
$code = htmlspecialchars($matches[3][$i]);
$code = preg_replace("/(\s*?\r?\n\s*?)+/", "\n", $code);
$num = rand(1000,9999);
$id = "runcode_$num";
$blockID = "<p>++RUNCODE_BLOCK_$num++";
$innertext='<h3><span class="btn btn--secondary">代码预览:</span></h3><textarea id="'.$id.'" class="runcode" style="height: 100px;">'. $code . '</textarea><input class="btn btn--secondary" type="button" value="运行代码" onclick="runCode(\''.$id.'\')"/><input class="btn btn--secondary" style="margin-left: 30px;"type="button" value="全选代码" onclick="selectCode(\''.$id.'\')"/>';
$this->blocks[$blockID] = $innertext;
$content = str_replace($matches[0][$i], $blockID, $content);
}
}
return $content;
}
function part_two($content)
{
if (count($this->blocks)) {
$content = str_replace(array_keys($this->blocks), array_values($this->blocks), $content);
$this->blocks = array();
}
return $content;
}
}

第二步:将以下JS代码添加至当前主题的 footer.php 文件中,放在</body>标签上面:


<script type="text/javascript">
function runCode(objid) {
var winname = window.open('', "_blank", '');
var obj = document.getElementById(objid);
winname.document.open('text/HTML', 'replace');
winname.opener = null;
winname.document.write(obj.value);
winname.document.close();
}
function selectCode(objid){
var obj = document.getElementById(objid);
obj.select();
}
</script>

第三步:将以下CSS代码添加至当前主题的CSS样式表中,用于控制样式:


.runcode{
width: 100%;
font-size:13px;
padding:10px 15px;
color:#eee;
background-color: #263540;
margin-bottom:5px;
border-radius:2px;
overflow:hidden; /* 删除此行表示可以滚动代码框 */
}

第四步:在网站撰写文章时,用文本模式输入以下标签,标签中填写需要运行的代码即可:


<runcode>这里填写需要运行的代码</runcode>

这样,我们就可以在自己的网站中添加在线运行代码功能了。

相关阅读:

实现网页”运行代码”功能JS代码

如何在网站添加“运行代码”功能

发表评论

电子邮件地址不会被公开。 必填项已用*标注