SyntaxHighlighter代码高亮插件详解编程语言

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

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

使用步骤：

一、下载并解压缩SyntaxHighlighter(http://download.csdn.net/detail/blog.ytso.com/7757359)当前版本3.0.83

二、引入文件

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

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

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

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

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

JavaScript代码：

<script type="text/javascript"> 
	SyntaxHighlighter.defaults['toolbar'] = false;  //去掉右上角问号图标 
	SyntaxHighlighter.config.tagName = 'pre';       //可以更改解析的默认Tag。 
	SyntaxHighlighter.config.bloggerMode = true;  
	SyntaxHighlighter.config.stripBrs = true;   
	SyntaxHighlighter.all(); 
</script>

HTML代码：

<pre class="brush: html;"> 
    <table> 
	    <tbody> 
		<tr> 
		    <td>hello</td> 
		    <td>syntaxhighlighter</td> 
		</tr> 
		<tr> 
		    <td>代码</td> 
		    <td>亮起来</td> 
		</tr> 
	    </tbody> 
    </table> 

注：HTML代码显示在标签为

中,SyntaxHighlighter默认会自动查找标签

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

SyntaxHighlighter.config.tagName = ‘div’; 

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

效果如图：

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

解决方法为：

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

.syntaxhighlighter table { 
   width: 100% !important; 
}

修改为：

.syntaxhighlighter table { 
   width: 100% !important; 
   margin: 1px 0 !important; 
}

项目演示源码下载：http://download.csdn.net/detail/blog.ytso.com/7757359

转载请注明出处：blog.ytso.com/article/details/38517737