天天看點

discuz門戶文章增加代碼高亮

一些有技術類的門戶站文章詳情頁,會有代碼高亮的需求,這樣便于使用者體驗,discuz論壇文章部分有這類插件,目前門戶文章還沒有沒有對應的插件隻能自行開發,修改系統内檔案

對應dz版本:discuz X系列

支援語言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML等

前台文章詳情展示

discuz門戶文章增加代碼高亮

前台釋出文章頁展示

discuz門戶文章增加代碼高亮

解決思路:

第一步:修改\source\module\home\home_editor.php檔案

搜尋

在其下插入

繼續搜尋

在其下插入:

還是繼續查找

在其上插入

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

本檔案最後一個位置搜尋

在其下插入:

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

搜尋

将其修改為

繼續搜尋

将其就改為

icoPage:"createPage",
icoCode:"createCode"
           

接着繼續搜尋

将其修改為

第四步:修改/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也修改了其部分内容