首页 > 代码库 > SyntaxHighlighter代码高亮插件

SyntaxHighlighter代码高亮插件

SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色,

使用十分方便,效果也不错,而且几乎支持常见的所有语言。

使用步骤:

 

二、引入文件

将解压后的scripts和styles文件夹复制到项目中,在页面中引入shCore.js和核心CSS文件shCore.css

其次引入你要高亮的语言JS,比如想高亮显示Java,那么必须引入scripts文件夹中的shBrushJava.js

最后引入高亮显示的主题CSS,默认为shThemeDefault.css

三、下面以高亮显示html代码为例

引入JS和CSS文件后 写如下代码:

 

JavaScript代码:

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <script type="text/javascript">  
  2.     SyntaxHighlighter.defaults[‘toolbar‘] = false;  //去掉右上角问号图标  
  3.     SyntaxHighlighter.config.tagName = ‘pre‘;       //可以更改解析的默认Tag。  
  4.     SyntaxHighlighter.config.bloggerMode = true;   
  5.     SyntaxHighlighter.config.stripBrs = true;    
  6.     SyntaxHighlighter.all();  
  7. </script>  

HTML代码:

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <pre class="brush: html;">  
  2.     <table>  
  3.         <tbody>  
  4.         <tr>  
  5.             <td>hello</td>  
  6.             <td>syntaxhighlighter</td>  
  7.         </tr>  
  8.         <tr>  
  9.             <td>代码</td>  
  10.             <td>亮起来</td>  
  11.         </tr>  
  12.         </tbody>  
  13.     </table>  
  14. </pre>  

注:HTML代码显示在标签为<pre></pre>中,SyntaxHighlighter默认会自动查找</pre>标签

其中标签可自定义,可以是<div>、<p>等等,只需修改如下配置代码:

SyntaxHighlighter.config.tagName = ‘div‘; 

同时根椐class类名选择不同的格式刷,如上是以html为例,因此格式刷配置为 class="brush: html;"

 

效果如图:

如果右侧出现滚动条如图:

解决方法为:

找到shCore.css这个文件,找到

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. .syntaxhighlighter table {  
  2.    width: 100% !important;  
  3. }  

修改为:

[css] view plaincopy在CODE上查看代码片派生到我的代码片
  1. .syntaxhighlighter table {  
  2.    width: 100% !important;  
  3.    margin: 1px !important;