`

SyntaxHighlighter代码加色使用方法

    博客分类:
  • WEB
阅读更多

原名: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/
演示地址:http://www.dreamprojections.com/syntaxhighlighter/Tests/PHP.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>

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

分享到:
评论

相关推荐

    syntaxhighlighter代码高亮插件.rar

    1. 下载:你可以从官方GitHub仓库或者一些开源代码托管平台下载到SyntaxHighlighter的压缩包,如你提供的"SyntaxHighlighter代码高亮插件.rar"。 2. 引入:解压后,将所需的CSS和JavaScript文件引入到你的HTML页面中...

    JS代码高亮插件SyntaxHighlighter

    "jquery_highlighter.js"很可能是基于jQuery实现的代码高亮插件,可能是SyntaxHighlighter的jQuery版本或者是与之配合使用的扩展插件,用于与jQuery的事件和DOM操作更好地集成。 最后,"SyntaxHighlighter"这个文件...

    SyntaxHighlighter 高亮代码插件JS

    下面将详细介绍SyntaxHighlighter的核心功能、使用方法以及如何进行定制。 1. **核心功能** - **语法识别**:SyntaxHighlighter支持多种编程语言的语法高亮,包括但不限于HTML、CSS、JavaScript、Python、Java、...

    syntaxhighlighter库和实例

    SyntaxHighlighter 是一款流行且功能强大的代码高亮显示库,尤其在网页上展示源代码时,能够提供美观、易读的格式。它支持多种编程语言,如 HTML、CSS、JavaScript、PHP、Python、Java 等,为开发者和博主提供了一个...

    商业编程-源码-SyntaxHighlighter高亮代码显示实例源码.zip

    3. 使用SyntaxHighlighter提供的JavaScript方法(如`SyntaxHighlighter.all()`)来初始化和高亮所有的代码块。 通过这些源码,开发者可以了解如何将SyntaxHighlighter集成到自己的项目中,创建出专业且视觉友好的...

    syntaxhighlighter_3.0.83

    2. **自定义主题**:用户可以根据自己的喜好选择或创建不同的主题,改变代码的背景色、字体样式等,以达到最佳的视觉效果。 3. **自动检测语言**:SyntaxHighlighter 可以自动检测插入到页面中的代码片段的语言类型...

    .net 代码高亮显示

    为了提升代码的可读性,一种常见的方法是使用代码高亮显示技术。这使得源代码的结构更加突出,关键字、变量和函数名等元素能够以不同的颜色或样式呈现,从而帮助我们更快地理解和分析代码。本文将深入探讨.NET平台下...

    CKEditor中加入syntaxhighlighter代码高亮插件

    在这个例子中,我们创建了一个名为`insertcode`的插件,允许用户在编辑器中插入代码,并使用`SyntaxHighlighter`库进行代码高亮。这个过程包括创建插件文件、定义对话框、加载插件以及引入和配置`SyntaxHighlighter`...

    z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)

    解决这一问题的一种方法是通过修改CSS样式来强制代码段能够自动换行。 - 在Z-Blog的SyntaxHighlighter目录下的`shCoreDefault.pack.css`文件中,添加如下CSS样式规则: ```css body.syntaxhighlighter.line { ...

    SyntaxHighlighter 3.0.83

    SyntaxHighlighter 3.0.83 是一个广泛使用的开源代码语法高亮插件,尤其在网站和博客中,用于展示编程代码时提供美观的视觉效果。它通过自动识别不同的编程语言并应用相应的颜色和样式,使代码更易读、更吸引人。这...

    使C#代码具有彩色区分功能源码

    例如,在方法定义、循环或条件语句中,内部代码块应该有适当的缩进来表示它们的层级关系。我们可以通过分析代码的缩进空格或通过对代码块的开始和结束标记(如花括号)进行计数来实现这一点。 在实际开发中,可以...

    syntaxhighlighter.js 免费下载

    在线各种代码显示在html页面中,并进行变色处理。工具类js

    TinyMCE.SyntaxHighlighter:TinyMCE 4 插件,用于输出与 Highlight.js 兼容的代码

    SyntaxHighlighter是TinyMCE的一个插件,专注于代码高亮显示,尤其适用于展示编程语言代码。 该插件名为"TinyMCE.SyntaxHighlighter",主要目标是让在TinyMCE编辑器内嵌入的代码片段能够与Highlight.js库兼容。...

    防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法

    SyntaxHighlighter.js是一款广泛使用的JavaScript插件,专门用于实现代码的美观高亮显示。它的易用性和灵活性深受开发者喜爱,然而,一个常见的问题是,在页面加载过程中,代码块会先以原始格式呈现,随后瞬间被...

    C#代码高亮示例代码

    例如,一个简单的实现可能会用正则表达式匹配所有的关键字,然后使用CSS类为它们添加特定的背景色或前景色。更复杂的方法可能涉及编译器服务,它们能更准确地解析代码,甚至支持语法错误检测。 在实际开发中,我们...

    js版本代码高亮

    代码高亮可以通过改变字体颜色、背景色、加粗等方式,突出关键语句和关键字,提高代码的可读性。 `dp.SyntaxHighlighter` 是一个JavaScript库,专用于在网页上实现代码高亮显示。这个库可能包含了CSS样式、...

    tinyMCE插件开发之插代码高亮 v1.0.rar

    总的来说,“tinyMCE插件开发之插代码高亮 v1.0”是提高TinyMCE编辑器功能的一个实用解决方案,它利用SyntaxHighlighter的代码高亮能力,使得在富文本编辑器中查看和编辑代码变得更加便捷和直观。对于那些经常需要在...

    ReactNative的一个代码高亮组件

    1. **源码文件**:组件的核心实现,通常包括`.js`或`.jsx`文件,如`SyntaxHighlighter.js`,该文件包含了组件的基本结构和逻辑,如渲染代码块、处理语言识别和颜色样式等。 2. **样式文件**:为了实现代码的高亮...

Global site tag (gtag.js) - Google Analytics