代码着色之SyntaxHighlighter项目(最流行的代码高亮)

2024-09-26 21:54:46

下载地址：http://www.dreamprojections.com/syntaxhighlighter/
或http://code.google.com/p/syntaxhighlighter/
演示地址：http://www.dreamprojections.com/syntaxhighlighter/Tests/PHP.html

使用方法：

1、假设网页文件test.htm存放在一个目录，则将dp.SyntaxHighlighter解压缩到该目录下的子目录，假设为images
2、在网页的<head></head>之间插入以下代码：

3、在网页要显示程序源代码的地方插入以下代码（其中的class="js"表示以js语法显示源代码，其他可设定的class值分别为c#、css、c、delphi、java、js、php、python、ruby、sql、vb、xml）：

代码如下:

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

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

代码如下:

<html>
<head>
<title>测试</title>
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
</head>
<body>
<textarea name="code" class="java" rows="15" cols="100">
public class a{
}
</textarea>
</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.ClipboardSwf ='Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</html>

SyntaxHighlighter 是Google Code 上的一个开源项目，主要用于给网页上的代码着色，使用十分方便，效果也不错，而且几乎支持常见的所有语言。

安装使用方法：

1. 首先在页面上添加如下代码（假设下载后的SyntaxHighlighter放在SyntaxHighlighter目录下面，注意目录结构）：

代码如下:

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

2. 使用方法如下：

方法一：使用pre

代码如下:

方法二：使用textarea

代码如下:

另外，这里还有一些高级特性的设置方法可供参考，诸如代码折叠等。

我在互动wiki 上安装成功，安装方法如上，第一步的修改代码放到doc.php文件的最后即可，以后编辑wiki的时候直接使用html模式即可按照第二步的方法给代码着色。

PS：CSDN的blog系统上使用的也是这个插件:>

=============================
http://code.google.com/p/syntaxhighlighter/downloads/list

第一步：增加样式包含

第二步：增加代码

代码如下:

<textarea name=”code” class=”php”>
代码放在这里
</textarea>

这里的class指的是语言有c,c#,vb,java,php,ruby,js,css,sql…

第三步包含所需要的js

代码如下:

====================================

1.首先下载SyntaxHighlighter.

2.解压到SyntaxHighlighter目录中.

3.建立HTML文件:

代码如下:

<pre name="code" class="Ruby">
...Ruby代码...
</pre>

可以应用在pre和textarea两种HTML标签内,name为code,class为要着色的语言,现在支持C, C#, CSS, Delphi, Java, JScript, Php, Python, Ruby, Sql, VB, XML这些语言.

4.加入所需的CSS和JS文件:

代码如下:

这里只用了Ruby,其他的类似.

5.接下来就是在window的onload事件内,让SyntaxHighlighter工作起来.

代码如下:

window.onload = function()

{
dp.SyntaxHighlighter.ClipboardSwf = './lib/SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll("code");
};

之后,刷新下页面,你就会发现,代码已经被着上了相应的颜色了

======================
将你要高亮显示的代码放在 pre 或 textarea 中

代码如下:

class选项允许你单独配置文本块。

nogutter 将不会显示行号。

nocontrols     将不会在顶部显示控制器。
collapse     将默认折叠代码。
firstline[value]     行计数开始值。默认值是 1
showcolumns     将在第一行显示行列。

这些选项和别名放置在一起，使用冒号 : 字符分隔。

代码如下:

... some code here ...
</pre>

语言别名

C++     cpp, c, c++
C#     c#, c-sharp, csharp
CSS     css
Delphi     delphi, pascal
Java     java
Java Script     js, jscript, javascript
PHP     php
Python     py, python
Ruby     rb, ruby, rails, ror
Sql     sql
VB     vb, vb.net
XML/HTML     xml, html, xhtml, xslt

在页面最后添加JS和CSS引用 JS有很多，若是语言固定的话，只要引入 shCore 和 shBrushXml(相应) 的JS文件就行了

代码如下:

* SyntaxHighlighter－HighlightAll 方法

这是一个全局函数，它找出网页上所有的代码块，将他们转换成高亮的代码块。
参数
function dp.SyntaxHighlighter.HighlightAll(name, [showGutter], [showControls],
[collapseAll], [firstLine], [showColumns])

name 必要 <pre> 和 <textarea> 元素使用的名称。

showGutter     可选     打开或关闭所有处理的代码块的行号。（默认为 true）
showControls     可选     打开或关闭所有处理的 <pre> 的控制器。（默认为 true）
collapseAll     可选     打开或关闭所有处理的 <pre> 的折叠。如果 showControls 是 false 或被交换了，这个值将被忽略。（默认为 false）
firstLine     可选     允许指定行号开始的第一行。当你想指明代码块在文件的哪个相对位置时有用。（默认为 1）
showColumns     可选     将在第一行显示行列。（默认为 false）

所有传到 HighlightAll 调用的值将重载配置的对应选项.

下载地址：

http://code.google.com/p/syntaxhighlighter/

附一个小例子说一下 textarea 和 pre 的区别

代码如下:

<html>
<head>
<title>高亮测试</title>
    <link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"/>
    <script language="javascript" src="Scripts/shCore.js"></script>
    <script language="javascript" src="Scripts/shBrushXml.js"></script>
</head>
<body>
<textarea name="code" class="xml" rows="15" cols="100">
程序源代码放在这儿afds
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');
请注译掉这二句查看效果,注意 textarea 和 pre 的分别。pre中的《号需要转译，要不然就原样输出了,在高亮代码没有生效的情况下。
<h1>adsfadfadf</h1>
    -------------------
<h1>adsfadfadf</h1>
</textarea>
<pre name="code2" class="xml" rows="15" cols="100">
程序源代码放在这儿afds
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');
    <h1>adsfadfadf</h1>
    -------------------
<h1>adsfadfadf</h1>
</pre>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
dp.SyntaxHighlighter.HighlightAll('code2');
</script>
</body>
</html>

syntaxhighlighter 使用方法

Placing the code Place your code on the page and surround it with <pre> tag. Set name attribute to code and class attribute to one of the language aliases you wish to use. <pre name="code" class="c-sharp"> ... some code her
FCKEditor SyntaxHighlighter整合实现代码高亮显示

因此上网查了许多资料,没有说怎么做的,都是自己改好一个包上传.我研究了一个这些整合好的例子,粗略说一说,对以后开发其它FCKeditor插件也有好处. 为方便大家使用,我们特提供两个已经做成插件的版本.下载地址第一步:在FCKeditor的路径中找到"editor\plugins\",在其中创建"highlighter"文件夹. 第二步:将"dp.SyntaxHighlighter\Scripts"文件夹复制到此文件夹中,所有的js文件和一个f
ckeditor syntaxhighlighter代码高亮插件，完美修复

CKeditor的对象跟FCKeditor不大一样,不能直接调用innerHTML和outerHTML了,绕了个大弯子,在当前节点前插入一个新节点,然后删除原先的节点...很傻,不过解决了问题. 顺便给高级配置页多加了一个选项"不自动转换超链接",syntaxhighlighter默认会把代码里的网址转换成超链接,看起来很不爽,现在可以自由设置了,呵呵来个图使用方法: 1. 解压附件到plugins (sablog2.0在include\editor\plugins) 2. 打开C
syntaxhighlighter 去掉右上角问号图标的三种方法

使用免费产品就有帮它宣传的义务,所以,在使用该工具时,会自动显示一个帮助图标,点击它会提示访问官方网站并呼吁捐款,付费后可以去掉该图标. syntaxhighlighter 官方的做法无可非议,不过如果我们想取消这个看起来比较碍眼的图标,又不想付费,那有什么办法呢?如下是我获知的三种方法: 方法一在网页前面,通常是在<head></head>里加上如下代码: <script type="text/javascript">SyntaxHighligh
SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

上网搜索了一下相关的文章不少,大同小异,本人一直使用的是CKeditor的文字编辑器,所以偿试使用网上很多网友介绍的SyntaxHighlighter配合CKEditor插件的方式实现.可能是因为SyntaxHighlighter和CKEditor版本不同,过程中遇到了一些问题,解决的同时也根据个人理解做部分调整,所以本文所描述的方法仅供参考. 一.SyntaxHighlighter简介 SyntaxHighlighter(原名:dp.SyntaxHighlighter)是一套在浏览器上对各种代
使用SyntaxHighlighter实现HTML高亮显示代码的方法

http://www.jb51.net/jiaoben/15599.htmlsyntaxhighlighter是一个小开源项目,它可以在网页中对各种程序源代码语法进行加亮显示.支持当前流行的各种编程语言: C#.CSS.C++.Delphi.Java.JavaScript.PHP.Python.Ruby.SQL.Visual Basic.XML / HTML 使用方法: 1.假设网页文件test.htm存放在一个目录,则将dp.SyntaxHighlighter解压缩到该目录下的子目录,假设为i
SyntaxHighlighter语法高亮插件使用说明

javascript语法高亮复制代码代码如下: (function(){ var el=document.getElementById("img"); var doc=document.documentElement,docBody=document.body; var oldY=(doc.scrollTop || docBody.scrollTop)+(doc.clientHeight/2 || docBody.clientHeight/2); (function(){ var
SyntaxHighlighter自动识别并加载脚本语言原创

SyntaxHighlighter是一个使用JavaScript编写的支持多种编程语言语法高亮的JS插件,很多大型网站或博客都在使用. SyntaxHighlighter插件默认是每种编程语言加载对应JS语言库,那么如何实现SyntaxHighlighter自动加载不同语言的JS语言库 SyntaxHighlighter官方已经给出了解决方案 shAutoloader.js 自动加载库: 在HTML文件中引用SyntaxHighlighter核心运行库 <!DOCTYPE html PUBLIC
SyntaxHighlighter 语法高亮插件的使用教程

首先到这里下载其源码.里面东西挺多的,我们基本上可以把它放到两个文件夹就是.其中shCore.js与shCore.js与clipboard.swf放到js文件夹中,shCore.css还有另一个CSS文件(随你挑一个吧)与所有图片放到style文件夹中.如果你想高亮html或xml代码,那么就在js多放一个shBrushXml.js,如果要高亮javascript代码,就要多加一个shBrushJScript.js代码.最后就是在我们的网页上引用它们. 复制代码代码如下: <link type
SyntaxHighlighter 3.0.83使用笔记

1.下载 SyntaxHighlighter 3.0.83 : http://alexgorbatchev.com/SyntaxHighlighter 2.配置 (1) SyntaxHighlighter解析的默认标签,默认为pre 复制代码代码如下: SyntaxHighlighter.config.tagName="div"; (2) 去除HTML换行标记如果您的软件会在每行末尾添加< br /> 标记,此选项允许您忽略这些标记. s
SyntaxHighlighter代码加色使用方法

它可以在网页中对各种程序源代码语法进行加亮显示.支持当前流行的各种编程语言:C#.CSS.C++.Delphi.Java.JavaScript.PHP.Python.Ruby.SQL.Visual Basic.XML / HTML 下载地址:http://www.dreamprojections.com/syntaxhighlighter/ 或http://code.google.com/p/syntaxhighlighter/ 演示地址:http://www.dreamprojections.

代码着色之SyntaxHighlighter项目(最流行的代码高亮)

相关推荐

随机推荐