discuz门户文章增加代码高亮

前台发布文章页展示

解决思路：
第一步：修改\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">
:
<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;"></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>

复制代码

修改文件部分已结束
最后上传这个压缩包里的文件到根目录就行了：

亲爱的游客您好，请登录后进行回复

		自动登录	找回密码
密码			立即注册

discuz门户文章增加代码高亮-Discuz教程下载

discuz门户文章增加代码高亮

相关文章

全部评论 0

最佳新人

管理/版主

土豪装逼

教程 / CSS+DIV素材

【原创】Discuz!X3.5版本无法访问uc_server中心解决办法349人阅读

【实测】各类meta标签的作用说明381人阅读

【原创】删除discuz!x3.5门户文章发布后，标题自动添加 ...的教619人阅读

【实测】 css左右滑动菜单811人阅读

【原创】判断href非url超链接则显示输入的文字，判断href非url超787人阅读

【原创】左侧导航栏样式，点击展开一级分类二级分类的DIY+CSS+JS641人阅读

【原创】discuz论坛首页四格，幻灯片+文字列表切换功能DIY+CSS+j2360人阅读

【原创】侧边导航栏样式，点击跳转到对应位置的DIY+CSS模块2131人阅读

【原创】分享一款html5+css3带倒计时效果并跳转指定网址的单页DI2357人阅读

【原创】分享一款横排5格免扣字体素材资源下载风格DIY+JS+CSS模2644人阅读

所属版块