SyntaxHighlighter高亮显示代码

最新推荐文章于 2023-07-29 21:08:56 发布

潘威威

最新推荐文章于 2023-07-29 21:08:56 发布

阅读量4.8k

点赞数 1

文章标签：高亮代码 Highlighte

本文链接：https://blog.csdn.net/panweiwei1994/article/details/60465883

版权

NoteTool 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

SyntaxHighlighter下载链接

http://alexgorbatchev.com/SyntaxHighlighter/download/

实例：高亮显示HTML代码

 <link rel="stylesheet" type="text/css" href="syntaxhighlighter_3.0.83/styles/shCore.css">  
<link rel="stylesheet" type="text/css" href="syntaxhighlighter_3.0.83/styles/shThemeDefault.css">  
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>  
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>  
<script type="text/javascript"> SyntaxHighlighter.all();  </script>      
<pre class="brush: html">  
<table>
    <tr>
        <td style="width:50px;"><label>内容</label></td>
        <td><input id="cbbBondTypeOfQuickSearch"/></td>
        <td style="width:240px;">
            <button id="btnQuickClearParamter">清空</button>
        </td>
    </tr>
</table>
</pre>

实例：高亮显示Java代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
<link rel="stylesheet" type="text/css" href="syntaxhighlighter_3.0.83/styles/shCore.css">  
<link rel="stylesheet" type="text/css" href="syntaxhighlighter_3.0.83/styles/shThemeDefault.css">  
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>  
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushJava.js"></script>  
<script type="text/javascript">  
    SyntaxHighlighter.all();  
</script>  

<pre class="brush: java">  
    public void test(){  
        System.out.println("test the high lighter");  
    }  
    @interface  
    public interface Test{  
        private static int i;  
    }  
</pre>  
</body>  
</html>

使用方法

当把资源下载下来之后，解压
然后依次引入styles/shCore.css, styles/shThemeDefault.css, scripts/shCore.js,
最后一个js就是上面示例提到的shBrushJava.js这个是根据个人需要去引入，比如你在body元素里面需要渲染javascript的代码，就需要引入shBrushJScript.js, 具体引入那个js可参照下面这个链接http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
加入<script type="text/javascript">SyntaxHighlighter.all(); </script>这一行代码
将需要高亮显示的代码放入<pre class=”brush: java”>里。如果需要高亮显示的是HTML代码，就将java替换成html