原名：SyntaxHighlighter，是一款用于web页面的代码着色工具，可以用来着色多种语言，可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。最早见于Yahoo的YUI，当时还属于自由软件，最近打开官方网站发现已被goolge收编。

它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言：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/
该工具核心基于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://baijinshan.javaeye.com/blog/547477

SyntaxHighlighter使用方法的更多相关文章

  1. WordPress代码高亮插件SyntaxHighlighter终极使用详解

    子曰: 工欲善其事,必先利其器.作为码农一枚,再加上站长这个已经不再光鲜的称呼,岂能没有一款经济实用.操作简单.而且功能必须强大.样式也必须好看的Wordpress代码高亮插件?!作为一个视代码如生命 ...

  2. Windows Live Writer 语法高亮

    1.WindowsLiveWriter.CNBlogs.CodeHighlighter.rar 这个插件生成的高亮代码与网页上的一模一样,插入后即可立即显示效果,不过貌似它必须联网才能实时显示效果,因 ...

  3. javaSE27天复习总结

    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...

  4. SyntaxHighlighter去掉右上角帮助图标的正确方法

    先贴出问题图片: 关于这个问题.网上有很多的帖子,说了三种方法,经过测试,发现其中有些方法是有问题的,有的方法虽然能过解决问题,但是却会带来其他的错误.现在说明如下: 网上的原话: syntaxhig ...

  5. 防止SyntaxHighlighter.js的闪烁闪一下的方法

    SyntaxHighlighter.js是一个代码高亮的JS插件,使用也很简单,但是由于是浏览器段执行JS代码来着色,会出现视觉上闪一下的效果.比如你的20行代码网页打开显示高度为100px,但是Sy ...

  6. android JNI 调用NDK方法

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  7. (转)CNBLOG离线Blog发布方法

    原文章路径:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html (新添了插件路径) 去年就知道有这个功能,不过没去深究总结 ...

  8. 博客代码美化(SyntaxHighlighter)

    这篇博文主要讲解自己使用SyntaxHighlighter对代码进行美工中遇见的问题以及如何使用SyntaxHighlighter? 首先来看看SyntaxHighlighter对代码美工的效果吧! ...

  9. 代码高亮美化插件-----SyntaxHighlighter

    IT类文章博客,代码高亮美化插件-----SyntaxHighlighter 最近在做一个类似个人博客的网站,因为文章中会用到各种代码,主要是Javascript,CSS,PHP,XML等.这些代码如 ...

随机推荐

  1. has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

    https://www.cnblogs.com/caimuqing/p/6733405.html // TODO 支持跨域访问 response.setHeader("Access-Cont ...

  2. 获取Spring应用环境上下文bean

    import org.springframework.beans.BeansException; import org.springframework.beans.factory.NoSuchBean ...

  3. LL_01

    http://www.52pojie.cn/thread-262602-1-1.html C http://www.92jh.cn/forum.php?mod=viewthread&tid=1 ...

  4. ubuntu tomcat https

    1.generate key use java key tool -storepass *** 2.sign certificate sudo keytool -export -alias ### - ...

  5. Raymond Mill In Lisp

    Raymond Mill is suitable for producing minerals powder, which is widely used in the metallurgy, buil ...

  6. 使用compiz出现奔溃的一些应急办法

    Linux Mint 17.1 CompizConfig is also installed by default so you can configure every aspect of Compi ...

  7. 14.JAVA-jar命令使用

    介绍 jar命令用来对*.class文件进行压缩,从而生成jar(archive)归档文件,避免文件过多. 定义一个文件: package common.demo ; public class Tes ...

  8. Linux查找文件内容（grep）

    转载链接:http://www.eguidedog.net/linux-tutorial/05-grep.php grep是Linux命令行下常用于查找过滤文本文件内容的命令.最简单的用法是: gre ...

  9. CSS实现下拉菜单的几种方法

    PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...

  10. 美团Java面试154道题

    Java集合22题 ArrayList 和 Vector 的区别.ArrayList与Vector区别 说说 ArrayList,Vector, LinkedList 的存储性能和特性.ArrayLi ...