discuz门户文章增加代码高亮

一些有技术类的门户站文章详情页，会有代码高亮的需求，这样便于用户体验，discuz论坛帖子部分有这类插件，目前门户文章还没有没有对应的插件只能自行开发，修改系统内文件
对应dz版本：discuz X系列
支持语言：C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML等

前台文章详情展示
前台发布文章页展示
解决思路：

第一步：修改\source\module\home\home_editor.php文件
搜索

a.icoSwitchMdi{background-position:-239px -60px;float:right}

在其下插入

a.icoCode {background-position:-120px -20px}

继续搜索

<a href="javascript:;" class="icoSwf" id="icoSwf" οnclick="createFlash(event, 1);return false;" title="<?php echo lang('home/editor', 'editor_link_flash');?>"></a>

在其下插入：

<a href="javascript:;" class="icoCode" id="icoCode" οnclick="createCode(event,1);return false;" title="<?php echo lang('home/editor', 'editor_code');?>"></a>

还是继续查找

<div id="createPage" class="eMenu" style="display:none;top:35px;left:26px;width:300px;font-size:12px"></div>

在其上插入

<div id="createCode" class="eMenu" style="display:none;top:35px;left:26px;width:400px;font-size:12px">
<!--?php echo lang('home/editor', 'editor_code_tip');?-->:
<select name="codeLanguage" id="codeLanguage">
<option value="php">PHP</option>
<option value="py">Python</option>
<option value="sql">SQL</option>
<option value="vb">Visual Basic</option>
<option value="xml">Html/XML</option>
<option value="as3">ActionScript3</option>
<option value="bash">Bash/shell</option>
<option value="csharp">C#</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="java">Java</option>
<option value="perl">Perl</option>
</select><br>
<textarea type="text" id="Sourcecode" name="Sourcecode" value=" " style="width:400px;height:200;"></textarea><br>
<input οnclick="createCode();" name="createURL" value="<?php echo lang('home/editor', 'editor_ok');?>" class="submit" type="button">
<a href="javascript:;" οnclick="fHide($('createCode'));return false;"><!--?php echo lang('home/editor', 'editor_cancel');?--></a>
</div>

本文件最后一个位置搜索

body { margin: 0; padding: 0; word-wrap: break-word; font-size:14px; line-height:1.8em; font-family: Tahoma, Arial, Helvetica, snas-serif; }

在其下插入：

pre {font-size:9pt;
font-family:Courier New,Arial;
border:1px solid #ddd;
border-left:5px solid #6CE26C;
background:#f6f6f6;
padding:5px;
}

第二步：修改\source\language\home\lang_editor.php文件（目的是添加所需语言）
搜索

'editor_prompt_mp3' => 'mp3 音乐',

在其下插入：

'editor_code_tip' => '请选择代码语言以便于着色',
'editor_code' => '插入代码',

第三步：修改\static\image\editor\editor_base.js文件
在文件的底部插入

/**
*创建代码高亮及着色方法
*Time 2012.3.5 侠客
*/
function createCode(e, show) {if(typeof show == 'undefined') {var sCode = $('Sourcecode').value;
var sLan = $('codeLanguage').value;
sCode = sCode.replace(/\</g,"<");
if (sCode!=null){setCaret();
format("insertHTML", '<div><h3>[代码]'+sLan+'代码：</h3><pre class="brush:'+sLan+';auto-links:false;">'+sCode+'</pre></div> <br/>');
}
fHide($('createCode'));
$('Sourcecode').value = ''; //设置初始值
} else {if(gIsIE){var e = window.event;
}
getCaret();
var dvCodeBox = $("createCode");
var iX = e.clientX;
var iY = e.clientY;
dvImgBox.style.display = "";
dvImgBox.style.left = (iX-300) + "px";
dvImgBox.style.top = 33 + "px";
}
}

搜索

if(fInObj(el, "createUrl") || fInObj(el, "createImg") || fInObj(el, "createSwf") || fInObj(el, "createPage")){

将其修改为

if(fInObj(el, "createUrl") || fInObj(el, "createImg") || fInObj(el, "createSwf") || fInObj(el, "createPage")|| fInObj(el, "createCode")){

继续搜索

icoPage:"createPage"

将其就改为

icoPage:"createPage",
icoCode:"createCode"

接着继续搜索

var arr = ["fontface", "fontsize", "dvForeColor", "dvPortrait", "divAlign", "divList" ,"divInOut", "editFaceBox", "createUrl", "createImg", "createSwf", "createPage"];

将其修改为

var arr = ["fontface", "fontsize", "dvForeColor", "dvPortrait", "divAlign", "divList" ,"divInOut", "editFaceBox", "createUrl", "createImg", "createSwf", "createPage","creatCode"];

第四步：修改/template/当前使用模板文件夹/common/header.php文件
搜索

</head>

在其上方插入

<style>pre {font-size:9pt;font-family:Courier New,Arial;border:1px solid #ddd;border-left:5px solid #15A3F4;background:#f6f6f6;padding:5px;overflow: auto;}
</style>

修改文件部分已结束

最后上传这个压缩包里的文件到根目录就行了：链接：https://pan.baidu.com/s/1uHLkvEzWD2_DO79QLDHFZA密码：nmlz

本文有参照http://www.dtyuanma.com/article-21-1.html也修改了其部分内容

discuz门户文章增加代码高亮相关推荐

微信文章实现代码高亮
最近在自学计算机学科相关基础课程,一个人学习是无聊的,所以想着把自己的学习过程记录在个人的微信公众号里.以前看到其他公众号里展示代码的样式很酷,一个框框里的代码要是上下左右像素溢出后还能上下左右滑动, ...
Discuz 门户文章插入图片自动添加 alt 标签
最近用 Discuz 搭建了个网站--(www.91kaiye.cn),用到了门户功能,不得不说Discuz 的功能还是非常强大的,但在使用过程中发现在发表文章时添加了图片却不能像 WordPress ...
discuz门户文章页面模板修改
修改内容:view.htm 1.文章标题,模板代码 <h1 class="ph">$article[title] <!--{if $article['status ...
DISCUZ门户文章列表页封面输出原图
<img src="{eval echo str_replace('.thumb.jpg','',$value['pic']);} " />
Discuz!门户列表页,文章中无图片时,随机选择一张作为封面
在门户列表页中,默认为当文章中包含有图片是选择第一张作为列表页上的封面.如下图: 但是有时候为了美观与一致性需要在文章里面没有包含图片时,封面照样显示图片.那怎么办? 方法(Discuz!X3.2亲测 ...
html文本框代码高亮,CodeMirror 编辑器文本框 TextArea 代码高亮插件 - 文章教程
CodeMirror 是一个用于编辑器文本框 TextArea 代码高亮 JavaScript 插件,为各种编程语言实现关键字.函数.变量等代码高亮显示,丰富的 API 和可扩展功能以及多个主题样式, ...
代码雨代码源复制_小程序基于Parser添加长按复制、代码高亮等功能
程序员技术之旅网站/小程序/公众号进入小程序功能展示引入Parser 微信小程序中引入Parser可直接在GitHub项目主页(https://github.com/jin-yufeng/Pars ...
如何在代码中让按钮高亮_各种博客的代码高亮是如何实现的
本文来自「Vue虚拟实验」的小伙伴余xiaoy,在做 Lovue 项目的时候,他负责了代码高亮显示功能,目前实现了代码高亮.主题切换.某行代码特殊显示.显示行号等功能,效果如下. 下面介绍如何通 ...
PrismJS，一款漂亮的代码高亮工具
PrismJS 是一款轻量级.可扩展的语法高亮显示工具,在支持现代 Web 标准基础下增加了更多可选的风格插件. PrismJS 支持自定义扩展代码的语言.主题和插件选项,勾选自己常用的代码语言和主题 ...
DevC++实现代码高亮复制进word
时间: 2019.10.28 缘起: 课程报告大多为word版,日常写代码还是习惯使用 DevC++ ,然而直接在word复制代码,格式实在陋. 教程现状: 网上不少教程,大部分介绍的都是使用Note ...

discuz门户文章增加代码高亮

discuz门户文章增加代码高亮相关推荐

最新文章

热门文章