高亮显示代码syntaxhighlighter syntaxhighlighter 4

对于一些程序代码类的网页,常常需要贴出代码,但显示效果往往很难让人满意(不能突出代码),如必优博客使用的代码高亮都是使用CSS控制输出的,不是真正意义上的代码高亮,只是显示形式类似于代码显示,那如何实现一个代码高亮效果?发现现在很多的代码高亮都需要与服务端交互,使用也比较麻烦。这里介绍一个代码高亮工具syntaxhighlighter语法高亮工具,它不需要与服务器交互,只需要包含相应的格式代码JS包,就可以轻松实现代码高亮,使用非常简单,本文以PHP为实例,谈谈如何使用syntaxhighlighter语法高亮工具优化你的代码显示,让你的代码更加具有吸引力,首先看一下PHP实例的效果图:

查看syntaxhighlighter语法高亮在线演示http://www.biuuu.com/demo/syntaxhighlighter/index.html



第一步,下载syntaxhighlighter语法高亮源码包,当前版本是2.0.320

http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
高亮显示代码syntaxhighlighter syntaxhighlighter 4

第二步,解压文件包,文件包内容如下:



第三步,如何使用syntaxhighlighter语法高亮工具,以PHP为例

一,包含文件部分

<script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushCss.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <script type="text/javascript" src="scripts/shBrushPhp.js"></script>

shCore.js是一个核心包,其次分别是shBrushCss.js、shBrushJScript.js和shBrushPhp.js,因为只需要对PHP代码进行高亮,所以其它的语法包没有包含,把有用的JS包包含就行,这样一方面有利于减少代码,另一方面加速网页打开的速度。

其次就是两个核心的CSS样式

<link type="text/css" rel="stylesheet" href="styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

这二个CSS样式是一定需要的,因为所有的显示控制都在这两个CSS样式文件中。

二,Javascript部分

<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>

这里有一个剪贴板配置,然后调用了一个all()方法,表示调用包含文件中的所用语法包。

三,HTML部分

<pre> //PHP数组高亮显示 $webName = array('必优博客'); $webUrl = array('http://www.biuuu.com/'); $web = array_merge($webName,$webUrl); print_r($web); function goCurrent(){ $name = __FILE__; echo $name; } </pre>

注意HTML部分,HTML代码显示在标签为<pre></pre>中,syntaxhighlighter默认会自动查找<pre />标签,其中标签可自定义,可以是<div />,<ul />,<ol />等等,只需要加上如下配置代码:

SyntaxHighlighter.config.tagName = 'div';

同时根椐class类名选择不同的格式刷,由于本文以PHP为实例,因此格式刷配置为PHP,如上:

如上方法就实现了PHP语法高亮显示,是不是非常简单!

当我们把鼠标移动到代码区域时会显示一个工具条,如下:



分别是显示代码,复制代码,打印代码和帮助四个功能,默认为英文,可以对这个工具条进行设置,如下代码:

SyntaxHighlighter.config.strings = { expandSource : '展开代码', viewSource : '查看代码', copyToClipboard : '复制代码', copyToClipboardConfirmation : '代码复制成功', print : '打印', help : '?', alert: '语法高亮nn', noBrush : '不能找到刷子: ', brushNotHtmlScript : '刷子没有配置html-script选项', aboutDialog : '<div></div>' }

至于如何显示提示文本,可自定义设置,其中最后一个选项aboutDialog 表示帮助对话框,可自定义配置HTML内容。

其它一此配置大家可以查看shCore.js文件,分别有一个defaults和config选项,可自定义配置其中的选项。

使用syntaxhighlighter语法高亮工具非常简单,轻松优化你的代码高亮显示,试试吧!

查看syntaxhighlighter语法高亮在线演示

http://www.biuuu.com/demo/syntaxhighlighter/index.html

下载syntaxhighlighter语法高亮实例源码包

http://jquerycodes.googlecode.com/files/syntaxhighlighter.rar

原创文章如转载,请注明:转载自 必优博客 http://www.biuuu.com/

本文链接地址:http://www.biuuu.com/p976.html

  

爱华网本文地址 » http://www.413yy.cn/a/25101011/93222.html

更多阅读

Lucene+HighLighter高亮显示实例 lucene高亮实例

今天搞了一个关于Lucene的例子,权当入门教程。网上有很多资料,但是要么不全、要么不好用,所以这里把全部代码以及依赖的包贴上来了。功能包括:创建索引、检索索引、高亮显示查询结果。分词使用的庖丁解牛。使用前先下载相关的LuceneCore

e路航x20高亮版 华创e路航x20刷机包

E路航X20高亮版 7寸高亮屏特价 车载GPS导航仪 数字电视 倒车后视正品e路航X20高亮版 GPS导航仪汽车车载7寸支持手柄游戏 倒车可视华创E路航X20豪华版 7寸高清高亮带AV带蓝牙 车载GPS导航仪一体机

如何让EditText显示图片 edittext里面放图片

EditText:通常用于显示文字,但有时候也需要在文字中夹杂一些图片,比如QQ中就可以使用表情图片,又比如需要的文字高亮显示等等,如何在android中也做到这样呢?记得android中有个android.text包,这里提供了对文本的强大的处理功能。

什么叫“高端经济舱”w舱 ? 高端经济舱代码

什么叫“高端经济舱”(w舱)?简单地说,就是花经济舱的钱,享受超越经济舱的服务。1. 高端经济舱产品目的:利用南航完善的航线网络优势,通过差异化服务吸引公商务旅客,最大限度地满足其出行需求,并提供超越经济舱的增值服务。

声明:《高亮显示代码syntaxhighlighter syntaxhighlighter 4》为网友沧桑稚子分享!如侵犯到您的合法权益请联系我们删除