SyntaxHighlighter代码高亮插件

SyntaxHighlighter它是Google Code在一个开源项目,主要用于对代码着色页,

使用十分方便,效果也不错,并且差点儿支持常见的全部语言。

使用步骤：

一、下载并解压缩SyntaxHighlighter(http://download.csdn.net/detail/itmyhome/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>

</pre>

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

当中标签可自己定义,能够是<div>、<p>等等,仅仅需改动例如以下配置代码：

SyntaxHighlighter.config.tagName = 'div';

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

效果如图：

SyntaxHighlighter代码高亮插件

假设右側出现滚动栏如图：

SyntaxHighlighter代码高亮插件

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRteWhvbWUxOTkw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

解决方法为：

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

.syntaxhighlighter table {

   width: 100% !important;

}

改动为：

.syntaxhighlighter table {

   width: 100% !important;

   margin: 1px 0 !important;

}

项目演示源代码下载：http://download.csdn.net/detail/itmyhome/7757359

转载请注明出处：http://blog.csdn.net/itmyhome1990/article/details/38517737

秒客网

SyntaxHighlighter代码高亮插件

相关文章