代码块在html模式下前端显示不正常 New

惧愁人 · 发表于 2024-6-19 09:45:25

马上注册，免费下载更多dz插件网资源。

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

×

上面是html模式下的代码块

代码块在html模式下前端显示不正常
New
code,代码块,codelangdiscuzcode,html,default

这是discuz用code输入后的代码块，是需要更改template/default/forum/discuzcode.htm这个前端文件的

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;}

复制代码

这段代码吗？我知道答案回答被采纳将会获得1 贡献已有0人回答

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

AI智能体 · 发表于 2025-3-15 16:11:50

在Discuz中处理HTML模式下代码块显示异常的问题，需要从模板结构、CSS样式和脚本交互三个维度进行分析。根据您提供的代码片段，以下是专业解决方案：

1. **模板结构修正**：
在`discuzcode.htm`中，代码容器的标准结构应为：

function tpl_codedisp($code) {
$randomid = 'code_'.random(3);
return <<<EOT
<div class="blockcode" id="$randomid">
<div class="blockcode_title">
{lang discuzcode_code}
<button class="copybtn" data-clipboard-target="#{$randomid} .code_content">{lang discuzcode_copyclipboard}</button>
</div>
<div class="blockcode_body">
<pre><code class="code_content">{$code}</code></pre>
</div>
</div>
EOT;
}

复制代码

2. **关键参数说明**：
- `$randomid`：通过`random(3)`生成唯一标识符，避免页面重复ID
- `$code`变量必须经过安全处理：

$code = dhtmlspecialchars($code); // 转换特殊字符
$code = nl2br(str_replace(' ', ' ', $code)); // 保留换行和空格

复制代码

3. **CSS样式强化**：
在`template/default/common/module.css`追加：

.blockcode {
border: 1px solid #E7E7E7;
margin: 10px 0;
border-radius: 4px;
}
.blockcode_title {
background: #F5F5F5;
padding: 8px 10px;
border-bottom: 1px solid #E7E7E7;
display: flex;
justify-content: space-between;
}
.copybtn {
background: none;
border: 1px solid #DDD;
padding: 2px 8px;
border-radius: 3px;
cursor: pointer;
}
.blockcode_body pre {
margin: 0;
padding: 10px;
overflow-x: auto;
background: #FCFCFC;
line-height: 1.6;
}
.code_content {
font-family: Consolas, Monaco, monospace;
white-space: pre-wrap;
word-wrap: break-word;
}

复制代码

4. **剪贴板功能实现**：
在页面底部模板追加JavaScript：

<script>
if(typeof ClipboardJS !== 'undefined') {
new ClipboardJS('.copybtn').on('success', function(e) {
alert('代码已复制到剪贴板');
});
}
</script>

复制代码

5. **语言包适配**：
在插件语言文件或全局语言包中需包含：

$lang = array_merge($lang, array(
'discuzcode_code' => '代码',
'discuzcode_copyclipboard' => '复制代码',
));

复制代码

6. **安全增强建议**：
- 在输出前增加过滤：

$code = preg_replace('/<script.*?<\/script>/is', '', $code);
$code = str_replace(array('<?', '?>'), array('<?', '?>'), $code);

复制代码

- 对于高亮显示推荐使用`highlight_string()`函数处理PHP代码

7. **移动端适配方案**：

@media screen and (max-width:768px){
.blockcode_body pre {
padding: 8px;
font-size: 14px;
}
.copybtn {
padding: 1px 6px;
font-size: 12px;
}
}

复制代码

建议通过DZ插件网（https://www.dz-x.net）的模板开发指南模块获取更多高级定制方案。若问题仍未解决，可提供具体异常截图，我将进一步分析定位问题根源。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

AI智能体 · 发表于 2025-3-15 16:13:35

针对Discuz代码块在前端显示异常的问题，结合discuzcode.htm模板的修改需求，为您提供如下专业解决方案：

1. **核心代码修正方案**（基于DZ插件网开发规范）：

// template/default/forum/discuzcode.htm
function tpl_codedisp($code) {
$randomid = 'code_'.random(3);
return '<div class="codebox" id="'.$randomid.'">
<div class="codehead">
<span class="codetitle">{lang discuzcode_code}</span>
<a href="javascript:;" onclick="copyCode($(\''.$randomid.'\'))" class="codecopybtn">{lang discuzcode_copyclipboard}</a>
</div>
<pre class="blockcode">'.htmlspecialchars($code).'</pre>
</div>';
}

复制代码

2. **配套CSS样式优化**（需加入模板CSS文件）：

.codebox {
border: 1px solid #EEE;
margin: 10px 0;
border-radius: 4px;
}
.codehead {
background: #F8F8F8;
padding: 8px 12px;
border-bottom: 1px solid #EEE;
display: flex;
justify-content: space-between;
align-items: center;
}
.codecopybtn {
color: #369;
cursor: pointer;
font-size: 12px;
padding: 3px 8px;
border-radius: 3px;
transition: background 0.2s;
}
.codecopybtn:hover {
background: #E3F2FD;
}

复制代码

3. **JavaScript交互增强**（需在模板尾部添加）：

function copyCode(obj) {
const range = document.createRange();
range.selectNode(obj.querySelector('pre'));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand('copy');
window.getSelection().removeAllRanges();
if (typeof showDialog != 'undefined') {
showDialog('代码已复制到剪贴板', 'notice');
}
}

复制代码

4. **语言包适配**（需在插件语言文件中添加）：

// source/language/lang_template.php
$lang['discuzcode_code'] = '代码';
$lang['discuzcode_copyclipboard'] = '复制代码';

复制代码

**实现原理说明：**
- 通过`random(3)`生成唯一ID确保多代码块场景下的独立操作
- 使用HTML5的Range API实现纯前端复制功能
- 采用Flex布局优化代码栏头部排版
- 通过CSS过渡动画增强交互反馈
- 兼容Discuz原生对话框提示系统

**调试注意事项：**
1. 修改后需到后台更新模板缓存
2. 检查CSS是否与其他插件存在样式冲突
3. 测试不同浏览器（特别是移动端）的复制兼容性
4. 长代码需添加横向滚动条时可追加：

.blockcode {
white-space: pre-wrap;
overflow-x: auto;
max-height: 500px;
}

复制代码

如需进一步优化代码高亮功能，可以参考DZ插件网的代码高亮插件实现方案，通过引入轻量级语法解析库来增强代码可读性。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。