SyntaxHighlighter代码高亮

由于项目中需要把后端XML日志显示出来, 为了界面的美观, 选择使用SyntaxHighlighter来做.尝试了SyntaxHighlighter3.0和SyntaxHighlighter2.1版本, 因为3.0版本的代码块中默认配置下多了一个滚动条, 并且效率比2.1慢, 所以选择了后个版本;

官网: http://alexgorbatchev.com/SyntaxHighlighter/

 

1.SyntaxHighlighter2.1的使用

使用方法比较简单, 配合官方的demo示例贴出来,如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SyntaxHighlighter Build Test Page</title>
    
    <link type="text/css" rel="stylesheet" href="styles/shCore.css"/> <!--核心样式表(必选)-->
    <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/> <!--主题样式表(多重样式选一)-->
    
    <script type="text/javascript" src="scripts/shCore.js"></script> <!--核心js脚本(必选)-->
    <script type="text/javascript" src="scripts/shBrushBash.js"></script> <!--"Shell"脚本高亮规则js (必选,你的代码是什么语言的,就选什么js脚本-->
    <script type="text/javascript" src="scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
    <script type="text/javascript" src="scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="scripts/shBrushGroovy.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="scripts/shBrushRuby.js"></script>
    <script type="text/javascript" src="scripts/shBrushScala.js"></script>
    <script type="text/javascript" src="scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="scripts/shBrushVb.js"></script>
    <script type="text/javascript" src="scripts/shBrushXml.js"></script> <!--"XML"高亮规则js-->
    

    <script type="text/javascript">
        SyntaxHighlighter.all(); //通过该js脚本来进行高亮处理;
    </script>
</head>

<body >
<h1>SyntaxHihglighter Test</h1>
<p>This is a test file to insure that everything is working well.</p>

<pre class="brush: xml"> <!--代码块需要使用<pre></pre> 或 <code></code>来包围, pre的class要设置为"brush: xml(你代码的语言)" -->
function test() : String
{
    return 10;
}

<hello>
    word!
</hello>

</pre>
</html>

 

显示效果:

SyntaxHighlighter代码高亮_第1张图片

 

 

2. 配合ajax

  使用ajax,目的是为了异步更新"日志查看区"的内容, 但发现在对DOM的动态添加后, 调用SyntaxHighlighter.all();无反应,

最后是通过调用SyntaxHighlighter.highlight();来达到目的的, 具体原因限于时间就没有细究了.

具体代码如下:

 

<script type="text/javascript">
jQuery(function($){

    function getLogs(){
        $.getJSON("http://127.0.0.1:9090/jsonrpc?callback=?",
                {"jsonStr" : '{"jsonrpc":"2.0", "method":"utils.packetLog.getLogs", "id":"01","params": {"rows":"' + 300 + '"}}'},
                    function(json){
                    showLogs(json);
        });
    }
    

    function showLogs(json){
    //动态组装DOM
var log_results = $('<pre class="brush: xml;"></pre>'); if(json.result != null){ var result = json.result; for(var index in result){ var log = result[index]; if( typeof(log) == "object"){ if(log.incoming == true){ log_results.append("Packet Log(in): <-- \n") }else{ log_results.append("Packet Log(out): --> \n") } log_results.append("" + log.content); } } } var div_log_results = $(".div_log_results"); //特定显示日志的div区域 div_log_results.empty(); div_log_results.append(log_results); syntaxHighlightLogResults(); } function syntaxHighlightLogResults(){ SyntaxHighlighter.highlight(); } getLogs();

 

 

3.附带上syntaxHighlighter2.1库下载地址

http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_2.1.382

 

 

你可能感兴趣的:(SyntaxHighlighter代码高亮)