首页 > 代码库 > 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
- <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代码:
[html] view plaincopy
- <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这个文件,找到
[css] view plaincopy
- .syntaxhighlighter table {
- width: 100% !important;
- }
修改为:
[css] view plaincopy
- .syntaxhighlighter table {
- width: 100% !important;
- margin: 1px 0 !important;
- }
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。