返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: 建站必知 >

代码高亮SyntaxHighlighter插件使用

2015-02-18 文章标签: 代码高亮SyntaxHighlighter插件 浏览次数:
在看别人网站的时候,有的语言是php 有的是mysql 有的是 javascript代码高亮显示,怎么实现的呢?今天给大家介绍一下

原名:SyntaxHighlighter,是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI,当时还属于自由软件,最近打开官方网站发现已被goolge收编。
 
它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML 

 

该工具核心基于javascript,使用起来很简单: 


1、假设网页文件test.htm存放在一个目录,将dp.SyntaxHighlighter解压缩,并复制其中的Scripts文件夹和styles文件夹,确保和test.html在同一个目录下面。 

2、在网页的<head></head>之间插入以下代码: 
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link> 

3、在网页要显示程序源代码的地方插入以下代码,若是HTML类型的话,用XML(其它的如class="js"表示以js语法显示源代码,其他可设定的class值分别为c#、css、c、elphi、java、js、php、python、ruby、sql、vb、xml): 

<textarea name="code" class="js" rows="15" cols="100"> 
程序源代码放在这儿 
</textarea> 

说明: 
name="code"是必须的,不能更改; 
class="xml"是着色的方式,即需要着色的代码的类型,根据需要进行更改。 

4、在网页尾部的</body>之前插入以下代码: 

<script class="javascript" src="Scripts/shCore.js"></script> 
<script class="javascript" src="Scripts/shBrushCSharp.js"></script> 
<script class="javascript" src="Scripts/shBrushPhp.js"></script> 
<script class="javascript" src="Scripts/shBrushJScript.js"></script> 
<script class="javascript" src="Scripts/shBrushJava.js"></script> 
<script class="javascript" src="Scripts/shBrushVb.js"></script> 
<script class="javascript" src="Scripts/shBrushSql.js"></script> 
<script class="javascript" src="Scripts/shBrushXml.js"></script> 
<script class="javascript" src="Scripts/shBrushDelphi.js"></script> 
<script class="javascript" src="Scripts/shBrushPython.js"></script> 
<script class="javascript" src="Scripts/shBrushRuby.js"></script> 
<script class="javascript" src="Scripts/shBrushCss.js"></script> 
<script class="javascript" src="Scripts/shBrushCpp.js"></script> 
<script class="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script> 


一个页面里面可以包含任意多个需要着色的代码段; 
压缩包中有各种着色代码类型的着色案例,大家可以参照使用。 


方法二: 

1. 首先在页面上添加如下代码(假设下载后的SyntaxHighlighter放在SyntaxHighlighter目录下面,注意目录结构): 


<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link> 

<script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script> 
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script> 
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script> 
<script language="javascript"> 
window.onload = function () { 
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf'; 
dp.SyntaxHighlighter.HighlightAll('code'); 

</script> 


官方的安装中没有window.onload,我想这个还是需要的,毕竟,页面加载的时候我就需要给代码着色。 

2. 使用方法如下: 

方法一:使用pre 

<pre name="code" class="c-sharp"> 
... some code here ... 
</pre> 


方法二:使用textarea 

<textarea name="code" class="c#" cols="60" rows="10"> 
... some code here ... 
</textarea> 


另外,这里还有一些高级特性的设置方法可供参考,诸如代码折叠等。
案例下载:
http://www.freemuban.com/uploadfile/2015/0218/20150218114602868.rar

你可能还感兴趣···

关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。