SyntaxHighlighter 语法高亮插件的使用教程

所属分类: 网络编程 / 网页编辑器 阅读数: 1124
收藏 0 赞 0 分享
首先到这里下载其源码。里面东西挺多的,我们基本上可以把它放到两个文件夹就是。其中shCore.js与shCore.js与clipboard.swf放到js文件夹中,shCore.css还有另一个CSS文件(随你挑一个吧)与所有图片放到style文件夹中。如果你想高亮html或xml代码,那么就在js多放一个shBrushXml.js,如果要高亮javascript代码,就要多加一个shBrushJScript.js代码。最后就是在我们的网页上引用它们。
复制代码 代码如下:

<link type="text/css" rel="stylesheet" href="style/shCore.css"/>
<link type="text/css" rel="stylesheet" href="style/shThemeRDark.css"/>
<script src="js/shCore.js" type="text/javascript" ></script>
<script src="js/shBrushJScript.js" type="text/javascript" ></script>
<script src="js/shBrushCss.js" type="text/javascript" ></script>
<script src="js/shBrushXml.js" type="text/javascript" ></script>

然后再在页面上新建一个script标签,在里面添加代码,进行配置与调用那个flash文件。
复制代码 代码如下:

SyntaxHighlighter.config.clipboardSwf = 'js/clipboard.swf';
SyntaxHighlighter.all();

这些代码是无需放于window.onload中的。再最后是如何使用,把要高亮的代码放于一个pre文件中,这些代码记得要事先处理,把<变成&lt;,把>变成&gt;。然后添加一个特殊的类型,brush加引号加上你们的代码的类型。如要高亮javascript则要class="brush:javascript",高亮css则要class="brush:css"。当然成功与否还在于你是否引进相关的javascript文件(指shBrushJScript.js等)

注意,这时代码不但只高亮了,还会多出行号与工具栏,这就要更细致的配置。它们都在那个类名上做手脚,如把行号禁止了,就要class="brush:javascript;gutter:false;"。

这些参数具体可见这里

复制代码 代码如下:

<pre class="brush:javascript;gutter:false;toolbar:false">
dom.ready(function(){
test("dom.ready");
});
</pre>

更多精彩内容其他人还在看

eWebEditor 上传文件提示格式不正确的解决方法

eWebEditor上传个别图片时出现:请选择一个有效的文件,支持的格式有(GIF|JPG|JPEG|BMP|PNG)!,在WINDOWSXP下使用该组件正常,却在WINDOWS2003上提示
收藏 0 赞 0 分享

xhEditor的异步载入实现代码

xhEditor的异步载入实现代码,需要的朋友可以参考下。
收藏 0 赞 0 分享

FCKeditor 编辑器插入代码功能实现步骤

4步轻松打造可以应用于任何FCK编辑器的CMS及其他程序,一个Fckeditor编辑器的插件,it560独家首发教程,无需增加字段,不修改代码,完全绿色环保。
收藏 0 赞 0 分享

配置fckeditor 实现图片的上传

配置fckeditor 实现图片的上传
收藏 0 赞 0 分享

FCKeditor提供了一个完整的JavaScript API

FCKeditor提供了一个完整的JavaScript API(Application Public Interface),你可以利用这些API来处理FCK编辑器,只要它被加载完成或在正在运行中.
收藏 0 赞 0 分享

fckediter javascript事件函数代码

fckediter javascript事件函数代码,另外fckeditor的可以扩展性不错,大家可以学习下,具体的代码,可以参考脚本之家以前发布的文章。
收藏 0 赞 0 分享

ASP FCKeditor在线编辑器使用方法

我用的是asp,FCKeditor没有使用帮助,网上google以下资料很多,但不是很全,不适合刚入门的菜鸟使用,通过我半天的使用经历,稍微做了些整理,便于大家学习.
收藏 0 赞 0 分享

ASP下使用FCKeditor在线编辑器的方法

有不少朋友现在也喜欢用asp下用fckeditor编辑器了,下面是具体的使用方法。需要的朋友可以参考下。
收藏 0 赞 0 分享

ASP.NET中FCKEDITOR在线编辑器的用法

FCKEDITOR在线编辑器在asp.net下的使用方法,需要的朋友可以参考下。
收藏 0 赞 0 分享

php下FCKeditor2.6.5网页编辑器的使用方法

php下FCKeditor2.6.5网页编辑器的使用方法,需要的朋友可以参考下。
收藏 0 赞 0 分享
查看更多