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

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

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章代码着色之SyntaxHighlighter项目(最流行的代码高亮)由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

下载地址：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目录下面，注意目录结构）:

。

复制代码代码如下:

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

。

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

我在互动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 。

。

复制代码代码如下:

 
 <script language=”javascript” src=”Scripts/shCore.js”></script> 
 
 <script language=”javascript” src=”Scripts/shBrushPhp.js”></script>(包含对应语言的文件) 
 
 <script language=”javascript”> 
 
 dp.SyntaxHighlighter.ClipboardSwf = ‘Scripts/clipboard.swf';// 复制代码要用到 
 
 dp.SyntaxHighlighter.HighlightAll('code');// 这里对应的就是上面的name 
 
 </script>

==================================== 。

。

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文件

。

复制代码代码如下:

 
 <link rel="stylesheet" type="text/css" href="./lib/SyntaxHighlighter/Styles/SyntaxHighlighter.css" /> 
 
 <script src="./lib/SyntaxHighlighter/Scripts/shCore.js"></script> 
 
 <script src="./lib/SyntaxHighlighter/Scripts/shBrushRuby.js"></script>

。

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

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

复制代码代码如下:

window.onload = function() 。

。

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

。

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

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

复制代码代码如下:

 
 <pre name="code" class="c-sharp"> 
 
 ... some code here ... 
 
 </pre> 
 
 <textarea name="code" class="c#" cols="60" rows="10"> 
 
 ... some code here ... 
 
 </textarea>

。

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

nogutter 将不会显示行号.

nocontrols 将不会在顶部显示控制器。 collapse 将默认折叠代码。 firstline[value] 行计数开始值。默认值是 1 showcolumns 将在第一行显示行列。这些选项和别名放置在一起，使用冒号 : 字符分隔。。

复制代码代码如下:

<pre name="code" class="html:nocontrols:firstline[10]"> 。

。

... 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文件就行了。

。

复制代码代码如下:

 
 <link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link> 
 
 <script language="javascript" src="js/shCore.js"></script> 
 
 <script language="javascript" src="js/shBrushCSharp.js"></script> 
 
 <script language="javascript" src="js/shBrushXml.js"></script> 
 
 <script language="javascript"> 
 
 dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf'; 
 
 dp.SyntaxHighlighter.HighlightAll('code');//这里的 ‘code' 为上面放置代码的容器 
 
 </script>

。

* 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> 
 
     ------------------- 
 
 &lt;h1>adsfadfadf&lt;/h1> 
 
 </textarea> 
 
 <pre name="code2" class="xml" rows="15" cols="100"> 
 
 程序源代码放在这儿afds 
 
 dp.SyntaxHighlighter.HighlightAll('code'); 
 
 dp.SyntaxHighlighter.HighlightAll('code2'); 
 
     <h1>adsfadfadf</h1> 
 
     ------------------- 
 
 &lt;h1>adsfadfadf&lt;/h1> 
 
 </pre> 
 
 <script class="javascript"> 
 
 dp.SyntaxHighlighter.HighlightAll('code'); 
 
 dp.SyntaxHighlighter.HighlightAll('code2'); 
 
 </script> 
 
 </body> 
 
 </html>

最后此篇关于代码着色之SyntaxHighlighter项目(最流行的代码高亮)的文章就讲到这里了,如果你想了解更多关于代码着色之SyntaxHighlighter项目(最流行的代码高亮)的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： Python实现的json文件读取及中文乱码显示问题解决方法

文章推荐： jmeter在linux系统下运行及本地内存调优的方法详解

文章推荐：原神薄荷在哪里采集原神薄荷采集攻略

文章推荐： google提供二维码生成器

c - 我尝试理解 [c 代码 -> 汇编] 代码
我尝试理解[c代码 -> 汇编]代码 void node::Check( data & _data1, vector& _data2) { -> push ebp -> mov ebp,esp ->
c# - 在当前表单(代码)的上下文中从字符串动态运行 C# 代码
我需要在当前表单(代码)的上下文中运行文本文件中的代码。其中一项要求是让代码创建新控件并将其添加到当前窗体。例如，在Form1.cs中: using System.Windows.Forms; ..
c# - c++代码(malloc方法)到c#代码
我有此 C++ 代码并将其转换为 C# (.net Framework 4) 代码。有没有人给我一些关于 malloc、free 和 sprintf 方法的提示？ int monate = ee; d
C 代码，简单的 Web 服务器(代码 OK)
我的网络服务器代码有问题 #include #include #include #include #include #include #include int
html - 将特定列表元素置于斜体的 CSS 代码(不更改 html 代码)
给定以下 html 代码，将列表中的第三个元素(即“美丽”一词)以斜体显示的 CSS 代码是什么？当然，我可以给这个元素一个 id 或一个 class，但 html 代码必须保持不变。谢谢
javascript - 是否有一些库可用于 IQR 代码(不是 QR 代码)？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭 7 年前。
macros - 在 Inno Setup [代码] 部分将宏扩展为 Pascal 代码
我试图制作一个宏来避免重复代码和注释。我试过这个: #define GrowOnPage(any Page, any Component) Component.Width := Page.Surfa
c# - 我正在尝试将我的旧 c++ 代码 "translate"转换为 c# 代码
我正在尝试将我的旧 C++ 代码“翻译”成头条新闻所暗示的 C# 代码。问题是我是 C# 中的新手，并不是所有的东西都像 C++ 中那样。在 C++ 中这些解决方案运行良好，但在 C# 中只是不能。我
r - 让 Visual Studio 代码(自动)格式化 R 代码
在 Windows 10 上工作，R 语言的格式化程序似乎没有在 Visual Studio Code 中完成它的工作。我试过R support for Visual Studio Code和 R-T
dynamic - 是否可以在 Python 脚本中生成和执行 Python 代码？ [动态 Python 代码]
我正在处理一些报告(计数)，我必须获取不同参数的计数。非常简单但乏味。一个参数的示例查询: qCountsEmployee = ( "select count(*) from %s wher
ios - 随机和偶然的网络错误(NSURLErrorDomain 代码=-1001 和 NSURLErrorDomain 代码=-1005)
最近几天我尝试从 d00m 调试网络错误。我开始用尽想法/线索，我希望其他 SO 用户拥有可能有用的宝贵经验。我希望能够提供所有相关信息，但我个人无法控制服务器环境。整个事情始于用户注意到我们应用程
javascript - visual studio 代码 intellisense 不适用于 dojo amd 代码
我有一个 app.js 文件，其中包含如下 dojo amd 模式代码: require(["dojo/dom", ..], function(dom){ dom.byId('someId').i
cuda - 'code=sm_X' 是否仅嵌入二进制(cubin)代码，或 PTX 代码，或两者？
我对“-gencode”语句中的“code=sm_X”选项有点困惑。一个例子:NVCC 编译器选项有什么作用 -gencode arch=compute_13,code=sm_13 嵌入库中？只有
javascript - 在 Javascript 下拉列表中添加 HTML 代码，Javascript 不评估 HTML 代码
我为我的表格使用 X-editable 框架。但是我有一些问题。 $(document).ready(function() { $('.access').editable({
python - 在 linux 中运行 flask/python 代码？基本 flask 代码
我一直在通过本教程学习 flask/python http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-wo
vim - G 代码 M 代码 VI 和 EMACS 的 CNC 语法
我想将 Vim 和 EMACS 用于 CNC、G 代码和 M 代码。 Vim 或 EMACS 是否有任何语法或模式来处理这种类型的代码？最佳答案一些快速搜索使我找到了 this vim 和 thi
iphone - 寻找关于将 Pre-Storyboard 代码 (XCode4) 移动到 Storyboard 代码 (XCode5) 的教程
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。想改进这个问题？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve this
vim - 如何让 Vim 理解 *.md 文件包含 Markdown 代码，而不是 Modula-2 代码？
这个问题在这里已经有了答案: Enabling markdown highlighting in Vim (5 个回答) 6年前关闭。当我在 Vim 中编辑包含 Markdown 代码的 READM
ios - 错误域=AVFoundationErrorDomain 代码=-11800 "The operation could not be completed"{错误域=NSOSStatusErrorDomain 代码=-16976 "(null)"}
我正在 Swift3 iOS 中开发视频应用程序。基本上我必须将视频 Assets 和音频与淡入淡出效果合并为一个并将其保存到 iPhone 画廊。为此，我使用以下方法: private func d
jenkins - 无法通过 Jenkins 管道作业的 jenkinsfile 中的 Groovy 代码(或 java 代码)创建文件
pipeline { agent any stages { stage('Build') { steps { e

qq735679552

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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