优化discuz自带的Code代码区块功能
做为一个喜欢捣鼓美化和发布点技术文章的小站长，没有一个好的代码段去存放和展示的话，那真的是一大损失，但是偏偏discuz程序在这一方面做得就不是很好，具体表现在第一代码段容器样式简陋、第二没有语法高亮、第三一键复制代码功能在手机版上没有、第四没有定义高度导致代码太多就显得页面过长了。针对这些问题我决定优化改造这个代码段容器。
在应用中心有一个类似插件，基本解决了上述问题prism代码高亮代码高亮，但是它却使用的是自定义语法标签来控制代码段显示。
为了保证后续效果兼容diacuz默认的标签，下面结合该插件功能，我进行效果合并，以满足在使用code标签的基础上，实现所有提到的效果。
第一步
前往资源中心下载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);
-->
<!--{/eval}-->
<!--{block return}--><div class="blockcode"><div id="$randomid"><ol><li>$code</ol></div><em onclick="copycode($('$randomid'));">{lang discuzcode_copyclipboard}</em></div><!--{/block}-->
<!--{eval}-->
<!--
return $return;
}我们整个替换为function tpl_codedisp($code) {
$randomid = 'code_'.random(3);
-->
<!--{/eval}-->
<!--{block return}--><figure class="code-block"><pre style=" max-height:300px;"><code class="language-php line-numbers">$code</code></pre></figure><!--{/block}-->
<!--{eval}-->
<!--
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) {
<!--{/eval}-->
<!--{block return}-->
<div class="comiis_blockcode comiis_bodybg b_ok f_b"><div class="bg_f b_l">$code</div></div>
<!--{/block}-->
<!--{eval}-->
return $return;
}我们整段替换为function tpl_codedisp($code) {
<!--{/eval}-->
<!--{block return}--><figure class="code-block" style="margin:5px 0;"><pre style="max-height:300px;"><code class="language-php line-numbers">$code</code></pre></figure><!--{/block}-->
<!--{eval}-->
return $return;
}
第三步
我们刷新网站后台和浏览器缓存即可显示效果。
提示一下
由于群组也可以使用code标签，但是群组页不能引用插件的文件，所以我们手动加入了。
差不多得了，没必要优秀得这么惊人！
页:
[1]