php动态高亮web源代码
注：配置好不允许高亮的文件名，安全第一
#php实现动态展示目录树结构源代码
适用于开放源代码，结合html缓存使用效果更佳，因循环较多不适合放首页
能力有限没实现行号
演示：show source|开放源代码
效果截图
代码
4个文件放统一目录
1.php,1.html,net.js,showsource.php
1.php
<?php
header('Content-Type: text/html; charset=utf-8');
define('root',str_replace('\\','/',realpath(__DIR__.'/../..')));
$dir = root;
$res = [];
$root_dir = $dir;
$res = tree($res,$dir);
//$res = preg_replace('/^'.preg_quote($dir,'/').'/', 'root', $res);
$data = base64_encode(json_encode($res));
require '1.html';
function tree(&$res,$dir)
{
global $root_dir;
if(count($res)===0){
$res[]=[
'id'=>sha1($dir),
'pid'=>0,
'type'=>'dir',
'handle'=>$dir,
'name'=>substr($dir,strripos($dir,'/')+1,strlen($dir)),
];
}
$handles = array_merge(glob($dir . '/.*'), glob($dir . '/*'));
$handles = preg_replace('/^[\s\S]*\/\.$/','',$handles);
$handles = preg_replace('/^[\s\S]*\/\.\.$/','',$handles);
$handles = array_filter($handles);
sort($handles);
foreach ($handles as $item){
if(is_dir($item)){
$res[]=[
'id'=>sha1($item),
'pid'=>sha1($dir),
'type'=>'dir',
'handle'=>preg_replace('/^'.preg_quote($root_dir,'/').'/','root',$item),
'name'=>substr($item,strripos($item,'/')+1,strlen($item)),
];
tree($res,$item);
}else{
$res[]=[
'id'=>sha1($item),
'pid'=>sha1($dir),
'type'=>'file',
'handle'=>preg_replace('/^'.preg_quote($root_dir,'/').'/','root',$item),
'name'=>substr($item,strripos($item,'/')+1,strlen($item)),
];
}
}
return $res;
}
function dump($s=null,$return = false)
{
ob_start();
var_dump($s);
$res = ob_get_clean();
$res = preg_replace('/'.preg_quote(']=>','/').'\n[\s]+/m', '] => ', $res);
switch (php_sapi_name()){
case 'cgi-fcgi':
$res = preg_replace('/ /U', "\t", $res);
$res = '<pre><code>'.$res.'</code></pre>';
if($return)
return $res;
echo $res;
break;
case 'cli':
if($return)
return $res;
echo $res;
break;
}
}1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>show source</title>
<style>
.tree {
--spacing: 1.5rem;
--radius: 10px;
padding-left: 0;
padding-right: 10px;
}
.tree li {
display: block;
position: relative;
padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}
.tree ul {
margin-left: calc(var(--radius) - var(--spacing));
padding-left: 0;
}
.tree ul li {
border-left: 2px solid #ddd;
}
.tree ul li:last-child {
border-color: transparent;
}
.tree ul li::before {
content: '';
display: block;
position: absolute;
top: calc(var(--spacing) / -2);
left: -2px;
width: calc(var(--spacing) + 2px);
height: calc(var(--spacing) + 1px);
border: solid #ddd;
border-width: 0 0 2px 2px;
}
.tree summary {
display: block;
cursor: pointer;
}
.tree summary::marker,
.tree summary::-webkit-details-marker {
display: none;
}
.tree summary:focus {
outline: none;
}
.tree summary:focus-visible {
outline: 1px dotted #000;
}
.tree summary::before {
content: '';
display: block;
position: absolute;
top: calc(var(--spacing) / 2 - var(--radius));
left: calc(var(--spacing) - var(--radius) - 1px);
width: calc(2 * var(--radius));
height: calc(2 * var(--radius));
border-radius: 50%;
background: #ddd;
}
.tree li a::after {
content: '';
display: block;
position: absolute;
top: calc(var(--spacing) / 2 - var(--radius));
left: calc(var(--spacing) - var(--radius) - 1px);
width: calc(2 * var(--radius));
height: calc(2 * var(--radius));
border-radius: 50%;
background: #ddd;
}
.tree .active a::after {
content: 'z';
z-index: 1;
background: #696;
color: #fff;
line-height: calc(2 * var(--radius) - 2px);
text-align: center;
}
.tree .active a{
color: #0a67fb;
}
.tree summary::before {
content: '+';
z-index: 1;
background: #696;
color: #fff;
line-height: calc(2 * var(--radius) - 2px);
text-align: center;
}
.tree details[open] > summary::before {
content: '−';
}
.tree ul li a {
display: block;
text-decoration: none;
color: #222222;
}
.tree summary:hover{
color: royalblue;
}
.tree a:hover{
color: royalblue;
}
body{
background: #fff;
}
.file-menu{
background: #eee;
}
.source{
/*background: royalblue;*/
}
.main{
width: 100%;
display: inline-flex;
}
.main .left{
width: 30%;
}
.main .right{
width: 70%;
}
.source{
padding-left: 10px;
}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div class="file-menu">
<ul id="file-list" class="tree">
</ul>
</div>
</div>
<div class="right">
<div id="source" class="source"></div>
</div>
</div>
<script src="/static/js/net.js"></script>
<script>
net = new Net();
var data = "<?php echo $data; ?>";
data = JSON.parse(atob(data));
var tree = treeFile(data);
initFileList(tree);
function showSource(obj) {
document.querySelectorAll('#file-list .active').forEach(function (active) {
active.classList.remove('active');
});
obj.parentElement.classList.add('active');
let post_data = {file:obj.dataset.file};
net.post('showsource.php','data='+JSON.stringify(post_data),function (data) {
data = JSON.parse(data);
if(data.code!==200){
document.getElementById("source").textContent=data.msg;
return;
}
document.getElementById("source").innerHTML='<pre>'+data.data+'</pre>';
});
}
function treeFile(data) {
for (let i = 0; i < data.length; i++) {
data[i].childnodes = [];
data[i].list = [];
for (let j = 0; j < data.length; j++) {
if (data[j].pid === data[i].id) {
switch (data[j].type) {
case 'dir':
data[i].childnodes.push(data[j]);
break;
case 'file':
data[i].list.push(data[j]);
break;
}
}
}
}
return data[0];
}
function initFileList(data) {
var ul = '';
ul = getFileList(data, ul);
document.getElementById("file-list").innerHTML = ul;
document.querySelectorAll('#file-list a').forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
showSource(link);
});
});
}
function getFileList(obj, ul) {
ul += '<li>';
ul += '<details>';
ul += '<summary>' + obj.name + '</summary>';
ul += '<ul>';
if (!(obj.childnodes.length === 0)) {
for (let key in obj.childnodes) {
ul = getFileList(obj.childnodes[key], ul);
}
}
if (!(obj.list.length === 0)) {
for (let key in obj.list) {
ul += '<li><a href="#" data-file="'+obj.list[key].handle+'">' + obj.list[key].name + '</a></li>';
}
}
ul += '</ul>';
ul += '</details>';
ul += '</li>';
return ul;
}
</script>
</body>
</html>net.js
function Net() {
this.xhr = new XMLHttpRequest();
this.get = function (url, func, pram = {}) {
xhr = this.xhr;
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
pram.code = this.status;
if (this.status == 200) {
func(this.responseText, pram);
} else {
func(this.responseText, pram);
}
}
};
xhr.open('get', url, false);
xhr.send()
};
this.post = function (url, data, func,pram = {}) {
xhr = this.xhr;
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
pram.code = this.status;
if (this.status == 200) {
func(this.responseText,pram);
} else {
func(this.responseText,pram);
}
}
};
xhr.open("POST", url, false);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(data)
}
}showsource.php
<?php
header('Content-Type: text/html; charset=utf-8');
if(empty($_POST['data'])){
die;
}
$data = $_POST['data'];
$data = json_decode($data,true);
if(empty($data['file'])){
die;
}
define('root',str_replace('\\','/',realpath(__DIR__.'/../..')));
$dir = root;
$root_dir = $dir;
$pass_files = [
'root/app/conf.php',
];
$allow_ext = [
'html','js','css','php','txt','xml','json',
];
$file = $data['file'];
if(in_array($file,$pass_files)){
outSource(500,'涉及配置不允许高亮','');
die;
}
if(strpos($file,'.')!==false){
$file_ext = substr($file,strripos($file,'.')+1,strlen($file));
if(!in_array($file_ext,$allow_ext)){
outSource(500,'只允许高亮'.implode('|',$allow_ext).'后缀文件','');
die;
}
}
$file = preg_replace('/^root/',$root_dir,$file);
if(!is_file($file)){
outSource(500,'文件不存在','');
die;
}
$code = highlight_file($file,true);
outSource(200,'',$code);
function outSource($code,$msg,$data)
{
echo json_encode([
'code'=>$code,
'msg'=>$msg,
'data'=>$data,
],JSON_UNESCAPED_UNICODE);
}注：配置好不允许高亮的文件名，安全第一
