SyntaxHighlighter代码高亮插件
使用十分方便,效果也不错,并且差点儿支持常见的全部语言。
使用步骤:
一、下载并解压缩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。HTML代码:SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.stripBrs = true; SyntaxHighlighter.all(); </script>
<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;"
效果如图:
假设右側出现滚动栏如图:
解决方法为:
找到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
版权声明:本文博客原创文章,博客,未经同意,不得转载。