SyntaxHighlighter代码高亮插件

SyntaxHighlighter代码高亮插件SyntaxHighli 是 GoogleCode 上的一个开源项目 主要用于给网页上的代码着色 使用十分方便 效果也不错 而且几乎支持常见的所有语言 使用步骤 一 下载并解压缩 SyntaxHighli xxx 当前版本 3 0 83 二 引入文件将解压后的 scripts 和 styles 文件夹复制到项目中 在页面中引入 shCore js 和核心 CSS 文件 shCore css 其次引入你要高亮

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;”


效果如图:

SyntaxHighlighter代码高亮插件

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

SyntaxHighlighter代码高亮插件

解决方法为:

找到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

(0)
上一篇 2026年3月18日 下午7:14
下一篇 2026年3月18日 下午7:15


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号