什么是SyntaxHighlighter
事实上在三天前我也不知道SyntaxHighlighter是什么东西,经过这两天的接触才发现这是个相当不错的基于JS的html页面代码高亮渲染工具(呃,姑且这么称呼吧)。为什么用代码高亮渲染工具?当我们有时候遇到技术问题求助无门的时候往往会想到上Google百度一下,看看网上有没有现成的代码供参考,于是搜索框关键字一打回车键一敲,刷地一下出现天文数字个搜索结果,这时候我们表示淡定,因为知道网上N多东西抄来抄去一大堆重复内容。然后按搜索排名挨个点击进去,却看到一个个网页上几百行乱糟糟的纯文本代码,过差的可读性抹煞了阅读的兴趣也降低了阅读的效率。这时候代码高亮工具就站出来了,誓为捍卫代码的整齐和美丽展开局域性保卫工作,于是我们可以发现一些靠谱的blog文往往会事先将里面的明文代码格式化好打扮得跟IDE里面一个样子供用户阅读,程序员表示这样很愉快。
本blog使用的版本
网上流传的代码高亮渲染工具有很多种,经过比较,最后敲定了用SyntaxHighlighter。搜索了一下发现SyntaxHighlighter 1.5版本目前是使用者较多的版本,于是小心翼翼地下载了文件包跟着教程配置了一下,效果不错,为了获得跟高级的特性访问了一下官网,发现3.083版本都已经出来了,就欢快地用了一下,发现配置比1.5稍简单,表现层和渲染层模块的拆分更加合理了。
如何安装
1.将文件压缩包拷贝下来,解压到本机或者你的站点,尽量保证存放的路径明确;
2.在你的页面中外链js文件shCore.js和shBrushJScript.js,以及相关css文件,也许你会发现style文件夹里包含了十几个css文件,不用紧张,随便挑选一个作为外链文件(至于为什么这样做,稍后会说明);
1
2
3
4
5
6
7
8
|
< SCRIPT type = text /javascript src = "/scripts/shCore.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "/scripts/shBrushJScript.js" ></ SCRIPT >
< LINK rel = stylesheet type = text /css href = "/STYLE/shCoreRDark.css" >
< SCRIPT type = text /javascript>
SyntaxHighlighter.all();
</ SCRIPT >
|
4.在<pre class=”brush:js;”></pre>或者<script type="syntaxhighlighter" class="brush: js"></script>(建议不要使用script标签,因为这样常用的标签很容易造成冲突)标签中创建代码;
1
2
3
4
5
|
< PRE class = brush :js;>function helloSyntaxHighlighter()
{ return "SyntaxHighlighter 3.0.83 ";
} </ PRE >
|
5.在页面加载完成时执行一句js代码SyntaxHighlighter.all(),大功告成,你将看到跟本文代码区域相似的效果。
安装的本质其实为页面增加了下面这几行代码(可以放在head内,但建议放在body的最后面减轻对页面加载造成的影响):
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
< SCRIPT type = text /javascript src = "/scripts/shCore.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "/scripts/shBrushJScript.js" ></ SCRIPT >
< SCRIPT type = text /javascript src = "/scripts/shBrushXml.js" ></ SCRIPT >
< LINK rel = stylesheet type = text /css href = "/STYLE/shCoreRDark.css" >
< SCRIPT type = text /javascript>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</ SCRIPT >
< PRE class = brush :js;>function helloSyntaxHighlighter()
{ return "SyntaxHighlighter 3.0.83 ";
} </ PRE >
|
若希望SyntaxHighlighter能正常工作,shCore.js是必须的;shCoreRDark.css是格式化主题,可以在style文件夹中选择你喜欢的一个主题文件并将它外链到页面上;shBrushJScript.js文件的作用是为了让渲染器能够对javascript代码进行格式化,shBrushXml.js的作用是为了让渲染器能够对XML代码进行格式化,刚才说过SyntaxHighlighter支持23种语言,如果你需要渲染器支持其他语言,就必须外链其他相应的文件,想了解各语言对应的文件请点击这里。
注意:确保外链路径正确,所有对SyntaxHighlighter的自定义配置都应写在SyntaxHighlighter.all();之前。
如何更改css主题
SyntaxHighlighter 3.0.83支持更换主题样式,方法很简单,直接更换内的链接文件路径就可以了:
1
|
< LINK rel = Stylesheet type = text /css href = "PATH/Styles/FileName.css" >
|
3.083版本的toolbar貌似被开发者弱化了,这里没有CopyToClip按钮,如果我们要复制一段代码,双击这块代码区域即可。至此,如果只是想图方便用一下SyntaxHighlighter让你的技术博文看起来更赏心悦目一些,对SyntaxHighlighter的功能特性和实现没有太大的兴趣,那么进行这里到这里就可以了,更多的分析和高级特性研究将会放到《SyntaxHighlighter的自定义配置》一文中。
相关推荐
SyntaxHighlighter高亮插件,可以格式化JAVA、PHP、CSS、SQL、XML、Python等等一些主流的代码格式。
syntaxhighlighter语法高亮工具,它不需要与服务器交互,只需要包含相应的格式代码JS包,就可以轻松实现代码高亮,使用非常简单。又很多种语言的刷子哦~
使用方法参考我的博客:...这里介绍一个代码高亮工具syntaxhighlighter语法高亮工具,它不需要与服务器交互,只需要包含相应的格式代码JS包,就可以轻松实现代码高亮,使用非常简单。
wps代码块插件
JS代码高亮插件SyntaxHighlighter demo
SyntaxHighlighter高亮代码显示实例源码 高亮您的代码,加速您的技术站点开发【有源码,支持大部分常用语言的高亮显示,如C#,JAVA等】 在没有高亮方法时,我们常常自己写样式,当然也有直接使用微软的Word转换成...
android 代码高亮 syntaxHighlighter js css xml 等文件
代码自动高亮SyntaxHighlighter_1.5.0
SyntaxHighLighter代码高亮插件实例(支持JavaScript、CSS、PHP、Java、Python、Vb、XML、Delphi、SQL、CSharp等等多种编程语言类)版本_2.1.364
Discuz7使用syntaxhighlighter_2.0.320实现代码高亮
syntaxhighlighter 是一套在浏览器上对各种代码进行语法着色的独立 JavaScript 库 代码高亮插件 html pre 各种显示高亮的主题 官网下载链接在文档中
SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色, 博文参考地址:http://blog.csdn.net/itmyhome1990/article/details/38517737
SyntaxHighlighter是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:...
syntaxhighlighter库和实例 syntaxhighlighter库和实例
代码语法高亮的JS插件及例子,基于SyntaxHighlighter实现的CSS、PHP、ASP、SQL、XHTML代码自动高亮插件,若你是开发者网站,这个功能对你绝对有用,下载插件包,自带有使用演示。
格式化效果如下图所示:这也是本站所使用的语法着色库,在线演示。示例代码:SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf'; ... ...
实现在网页上插入代片断,美观,方便使用。
商业编程-源码-SyntaxHighlighter高亮代码显示实例源码.zip
FCKeditor是现在最为流行的开源编辑器,SyntaxHighlighter是一个用JS实现的代码高亮显示插件,FCKeditor + SyntaxHighlighter 让代码高亮着色,可以最小化修改您的程序实现效果