学习SyntaxHighlighter -

wo_niu

浏览: 54521 次
性别:
来自: 北京

最近访客更多访客>>

wangsw15

vrljx

tianxizhong

rocky2shi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

学习SyntaxHighlighter

一款高亮显示各种格式的开源插件：

下载地址：http://alexgorbatchev.com/SyntaxHighlighter/download/

下载后解压：demos目录中有对应的例子

SyntaxHighlighter的用法相对简单：官网原文如下：

Basic Steps
 
To get SyntaxHighlighter to work on you page, you need to do the following:
Add base files to your page: shCore.js and shCore.css
Add brushes that you want (for example, shBrushJScript.js for JavaScript, see the list of all available brushes)
Include shCore.css and shThemeDefault.css
Create a code snippet with either <pre /> or <script /> method (see below)
Call SyntaxHighlighter.all() JavaScript method

要注意第2步骤是引入对应要需要高亮显示文本的类型如java、js.xml等要引入对应的js，具体js可以再根目录中scripts文件包中找到

官网提供了两中实现高亮显示的方式：

(1)<pre /> method

把要展示的内容放在<pre class="brush: xx"></pre>标签体中例如：

<pre  class="brush: js">
 function foo(){
 }
</pre>

class属性中 xx代表要展示代码的类型js、java、html等

在一个页面中可以包含多个<pre/>标签，class可以指定不同的代码格式

最后需要增加：

<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

(2)<script /> method

在<script/>中要使用<![CDATA[ ]]>标签请看：

<script type="syntaxhighlighter" class="brush: js">
<![CDATA[
  function foo(){
  }
]]>
</script>

内容放置到<![CDATA[xxx]]>中（xxx带表内容）,type="syntaxhighlighter"为固定写法，class="brush: xx"中(xx表示代码的类型)

在一个页面中可以包含多个<script/>标签，class可以指定不同的代码格式

样例：需要引入文件：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SyntaxHighlighter Autoloader Demo</title>
<script type="text/javascript" src="../scripts/XRegExp.js"></script> 
<script type="text/javascript" src="../scripts/shCore.js"></script>
 <script type="text/javascript" src="../scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="../styles/shCore.css"/>
<link type="text/css" rel="Stylesheet" href="../styles/shThemeDefault.css" />
</head>

这是自动装载的对应代码类型js，可以自己取舍需要的js，以及css样式的调整

<script type="text/javascript">
SyntaxHighlighter.autoloader(
'applescript ../scripts/shBrushAppleScript.js',
'actionscript3 as3 ../scripts/shBrushAS3.js',
'bash shell ../scripts/shBrushBash.js',
'coldfusion cf ../scripts/shBrushColdFusion.js',
'cpp c ../scripts/shBrushCpp.js',
'c# c-sharp csharp ../scripts/shBrushCSharp.js',
'css ../scripts/shBrushCss.js',
'delphi pascal ../scripts/shBrushDelphi.js',
'diff patch pas ../scripts/shBrushDiff.js',
'erl erlang ../scripts/shBrushErlang.js',
'groovy ../scripts/shBrushGroovy.js',
'java ../scripts/shBrushJava.js',
'jfx javafx ../scripts/shBrushJavaFX.js',
'js jscript javascript ../scripts/shBrushJScript.js',
'perl pl ../scripts/shBrushPerl.js',
'php ../scripts/shBrushPhp.js',
'text plain ../scripts/shBrushPlain.js',
'py python ../scripts/shBrushPython.js',
'ruby rails ror rb ../scripts/shBrushRuby.js',
'scala ../scripts/shBrushScala.js',
'sql ../scripts/shBrushSql.js',
'vb vbnet ../scripts/shBrushVb.js',
'xml xhtml xslt html ../scripts/shBrushXml.js'
);
SyntaxHighlighter.all();
</script>

如有不足之处，希望大家帮忙指出，希望和大家一起共同学习，进步。