分享

高亮显示代码syntaxhighlighter

 我依然125 2010-11-10

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

查看syntaxhighlighter语法高亮在线演示
syntaxhighlighter语法高亮
第一步,下载syntaxhighlighter语法高亮源码包,当前版本是2.0.320
/wiki/SyntaxHighlighter:Download

第二步,解压文件包,文件包内容如下:
syntaxhighlighter_file_lists
第三步,如何使用syntaxhighlighter语法高亮工具,以PHP为例

一,包含文件部分

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

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

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

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

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

二,Javascript部分

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

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

三,HTML部分

  1. <pre class="brush: php;">
  2. //PHP数组高亮显示
  3. $webName = array('必优博客');
  4. $webUrl = array('/');
  5. $web = array_merge($webName,$webUrl);
  6. print_r($web);
  7. function goCurrent(){
  8. $name = __FILE__;
  9. echo $name;
  10. }
  11. </pre>

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

  1. SyntaxHighlighter.config.tagName = 'div';

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

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

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

syntaxhighlighter_tooltips

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

  1. SyntaxHighlighter.config.strings = {
  2. expandSource : '展开代码',
  3. viewSource : '查看代码',
  4. copyToClipboard : '复制代码',
  5. copyToClipboardConfirmation : '代码复制成功',
  6. print : '打印',
  7. help : '?',
  8. alert: '语法高亮\n\n',
  9. noBrush : '不能找到刷子: ',
  10. brushNotHtmlScript : '刷子没有配置html-script选项',
  11. aboutDialog : '<div></div>'
  12. }

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

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

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

查看syntaxhighlighter语法高亮在线演示

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

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 全屏 打印 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多