SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色,
使用十分方便,效果也不错,而且几乎支持常见的所有语言。
使用步骤:
一、下载并解压缩SyntaxHighlighter(http://download.csdn.net/detail/itmyhome/)当前版本3.0.83
二、引入文件
将解压后的scripts和styles文件夹复制到项目中,在页面中引入shCore.js和核心CSS文件shCore.css
其次引入你要高亮的语言JS,比如想高亮显示Java,那么必须引入scripts文件夹中的shBrushJava.js
最后引入高亮显示的主题CSS,默认为shThemeDefault.css
三、下面以高亮显示html代码为例
引入JS和CSS文件后 写如下代码:
JavaScript代码:
HTML代码:
hello
syntaxhighlighter
代码
亮起来
注:HTML代码显示在标签为
中,SyntaxHighlighter默认会自动查找标签
其中标签可自定义,可以是
等等,只需修改如下配置代码:
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/
转载请注明出处:http://blog.csdn.net/itmyhome1990/article/details/
发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/212797.html原文链接:https://javaforall.net
