当前位置: 首页 > 图文教程 > 网络编程 > 网页编辑器 > SyntaxHighlighter 语法高亮插件的使用教程

网页编辑器
fckeditor在php中的用法(添加于修改写成了函数)
关于CKeditor的非主流个性应用的设置
dedecms5.5 最新版ckeditor编辑器整合教程
javascript 网页编辑框及拖拽图片的问题
asp.net FCKeditor 2.6.3 配置说明
轻松实现 CKfinder进驻CKEditor3.0
将CKfinder 整合进 CKEditor3.0的方法
ASp.net下fckeditor配置图片上传最简单的方法
ckeditor 简单配置方法
asp.net CKEditor和CKFinder的应用
FCKEDITOR 的高级功能和常见问题的解决方法
CuteEditor 编辑器的字体样式无法控制的解决方法
fckeditor 修改记录添加行距功能插件
SyntaxHighlighter 语法高亮插件的使用教程

网页编辑器 中的 SyntaxHighlighter 语法高亮插件的使用教程


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-02-27   浏览: 253 ::
收藏到网摘: n/a

现在做it编程类信息的网站,提供的源码如果能提供代码高亮对代码的阅读效果会提高不少。 首先到这里下载其源码。里面东西挺多的,我们基本上可以把它放到两个文件夹就是。其中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文件中,这些代码记得要事先处理,把<变成<,把>变成>。然后添加一个特殊的类型,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>