优化discuz自带的Code代码区块功能

飞流管家 · 发表于 2025-9-6 17:00:13

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

作者:飞流管家原创，未经许可，严禁转载！

做为一个喜欢捣鼓美化和发布点技术文章的小站长，没有一个好的代码段去存放和展示的话，那真的是一大损失，但是偏偏discuz程序在这一方面做得就不是很好，具体表现在第一代码段容器样式简陋、第二没有语法高亮、第三一键复制代码功能在手机版上没有、第四没有定义高度导致代码太多就显得页面过长了。
针对这些问题我决定优化改造这个代码段容器。
在应用中心有一个类似插件，基本解决了上述问题prism代码高亮代码高亮，但是它却使用的是自定义语法标签来控制代码段显示。
为了保证后续效果兼容diacuz默认的标签，下面结合该插件功能，我进行效果合并，以满足在使用code标签的基础上，实现所有提到的效果。
[zspay=10]
第一步
前往资源中心下载prism代码高亮代码高亮(bphp_code)，上传解压该插件到plugins目录，无需安装，目的只是引用相关文件。
第二步（以我的N7和克米模版为例）
打开template/discuz_theme_n7/viewthread.php后，在头部位置加入以下代码

<link rel="stylesheet" href="source/plugin/bphp_code/static/prism/prism.css" />
<style type="text/css">
.code-toolbar,.code-toolbar code{font-family: "PingFang SC","Microsoft YaHei",arial,"Hiragino Sans GB","Hiragino Sans GB W3"; }
.code-toolbar pre::-webkit-scrollbar {width: 12px; height: 10px;}
.code-toolbar pre::-webkit-scrollbar-thumb {border-radius: 2px; background-color: #999;}
.toolbar-item{ margin-left:5px;color:#fff;}
.toolbar-item:hover span{color:#fff;}
.toolbar-item button{cursor: pointer;}
.line-numbers .line-numbers-rows{border:none;}
</style>
<script type="text/javascript" src="source/plugin/bphp_code/static/prism/prism.js"></script>

复制代码

保存一下。
然后打开目录/template/default/forum/discuzcode.htm，大概在24行有段

function tpl_codedisp($code) {
$randomid = 'code_'.random(3);
-->
<div class="blockcode"><div id="$randomid"><ol><li>$code</ol></div><em onclick="copycode($('$randomid'));">{lang discuzcode_copyclipboard}</em></div>
<!--
return $return;
}

复制代码

我们整个替换为

function tpl_codedisp($code) {
$randomid = 'code_'.random(3);
-->
<figure class="code-block"><pre style=" max-height:300px;"><code class="language-php line-numbers">$code</code></pre></figure>
<!--
return $return;
}

复制代码

第二步（针对手机版）
打开目录template/comiis_app/touch/forum/viewthread.php在头部加入

<link rel="stylesheet" href="source/plugin/bphp_code/static/prism/prism.css" />
<style type="text/css">
.code-toolbar,.code-toolbar code{font-family: "PingFang SC","Microsoft YaHei",arial,"Hiragino Sans GB","Hiragino Sans GB W3"; }
.code-toolbar pre::-webkit-scrollbar {width: 12px; height: 10px;}
.code-toolbar pre::-webkit-scrollbar-thumb {border-radius: 2px; background-color: #999;}
.toolbar-item{ margin-left:5px;color:#fff;}
.toolbar-item:hover span{color:#fff;}
.toolbar-item button{cursor: pointer;}
.line-numbers .line-numbers-rows{border:none;}
</style>
<script type="text/javascript" src="source/plugin/bphp_code/static/prism/prism.js"></script>

复制代码

然后打开目录/template/comiis_app/touch/forum/discuzcode.php大概在19行有一段

function tpl_codedisp($code) {
<div class="comiis_blockcode comiis_bodybg b_ok f_b"><div class="bg_f b_l">$code</div></div>
return $return;
}

复制代码

我们整段替换为

function tpl_codedisp($code) {
<figure class="code-block" style="margin:5px 0;"><pre style="max-height:300px;"><code class="language-php line-numbers">$code</code></pre></figure>
return $return;
}

复制代码

第三步
我们刷新网站后台和浏览器缓存即可显示效果。

提示一下
由于群组也可以使用code标签，但是群组页不能引用插件的文件，所以我们手动加入了。
[/zspay]

书写人生 · 发表于 2025-9-6 19:56:25

差不多得了，没必要优秀得这么惊人！

	飞流：这论坛到底有没有资本给我投资一下啊！	07-20 22:07
	系统消息：飞流安卓客户端APP已上线，请在QQ群（123129）群文件内获取下载。	02-21 02:22
	麦麦管家：请遵守版规社律，保护信息安全，请勿脱离平台交易，谨防网络诈骗！#帮助中心#	01-24 12:40

[代码技巧] 优化discuz自带的Code代码区块功能

神评新秀

交易无需等待，成交就是现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

飞流广播+ 发布

神评新秀

关于我们

常用功能

服务引导