学习SyntaxHighlighter

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

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

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

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

Basic StepsTo 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>

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

学习SyntaxHighlighter相关推荐

syntaxHighlighter语法高亮
官网地址:http://alexgorbatchev.com/SyntaxHighlighter/ 下载好后,自带的index.html就是一个学习文档. 官网也有详细的使用说明文档,有使用pre或者 ...
EF 4.1+MVC3+Jquery Ajax+Json.Net+JqueryUI+IUnitOfWork+Repository 学习DEMO（暂停更新）
学习项目进行中,持续更新. SyntaxHighlighter貌似在2011wlw里报错,无法着色. EF记得在我搞Linq2Sql不久就放出声音出来了,说有多么多么好. 记得早先版本里尝鲜的时候我一 ...
如何快速学习freemarker以及使用经验
freemarker freemarker是静态模板,和html .jsp类似,我第一次看见后缀是 .ftl文件,我嚓,这是什么鬼,原来是freemarker,使用它的时候你就可以理解前端页面和jsp ...
syntaxhighlighter 代码高亮 - 插件化
syntaxhighlighter 代码高亮 - 插件化之前做过很多网站,不同的网站也都有不同的经验总结,只是前些年都不怎么注重线上博客.由于现在自身技能的不断丰富,个人的插件库.总结性的经验文档. ...
linux文件操作学习3
前言: 前面学了了用户和用户组的管理,文件权限的管理以及查找文件的三种方式,接下来将学习怎样配置环境变量,常见的压缩格式与怎么解压,管道,标准的输入输出以及重定向 echo命令: linux的echo ...
分享一下各类学习网站
目前正在学习的... 1. http://pengjiaheng.iteye.com/?page=2 虚拟机调优 2. http://blog.csdn.net/column/details/jv ...
java实现语法高亮插件_通用代码高亮插件（SyntaxHighlighter）
写这篇博文的起源是我想把自己的博客弄的更加美观,相信你也一样. 首先,我要说SyntaxHighlighter插件的实现方式及应用示例,然后再说明如何将其应用到自己的博客,使博客的代码着色更加美观. ...
SyntaxHighlighter 设置
SyntaxHighlighter SyntaxHighlighter 源码下载 1) Syntaxhighlighter_3.0.83 (下载点见篇头) 非官方原版,做了如下调整: ...
JS 插件----SyntaxHighlighter的使用
SyntaxHighlighter是一款用于web页面的代码着色工具,可以用来着色多种语言.今天我们通过实例来学习一下它的用法. SyntaxHighlighter的简单实例一.SyntaxHigh ...

学习SyntaxHighlighter

学习SyntaxHighlighter相关推荐

最新文章

热门文章