2011年6月

Code on Web

Introduction

Code on Web,简称COW。是一个基于SyntaxHighlighter 3.0.83 将代码转换为HTML的在线小工具。

一般我们在网页上展示各种计算机语言(C、C++、C#、PHP、JAVA.......)的源代码有3个途径

  1. 将原始代码写在HTML标签(比如<pre>),然后通过客户端的JavaScript让原始代码转换为HTML让浏览器解析。SyntaxHighlighter就是其中一个很优秀的工具之一,其他的还有Google的Prettify等等。这是一种最为流行的方法, 优点:节省带宽、节省硬盘。 缺点:占用客户端资源较多。如果你使用了wordpress的tinymce等WYSIWYG编辑器,在可视和HTML视图之间切换的时候,你的所有原始代码将会被弄乱。
  2. 第二种方法是将存储在数据库、文件系统里面的代码通过正则表达式提取,然后在服务器端进行转换,直接将生成的HTML代码输出到浏览器。 优点:节省带宽、节省硬盘。 缺点:代码多了,需要考虑服务器性能。
  3. 第三种就是Code on Web这种将生成好的HTML代码直接贴到网页上。 优点:客户端CPU资源占用少,无需任何server/client端脚本支持。 缺点:需要耗费更多的硬盘、网络带宽。因为显然HTML代码大小是原始代码的数倍。。`

原理

原理很简单,就是将原始代码通过正则表达式、字符串替换等方法转化为可读性强的HTML代码。HTML代码标签只含有具有一定意义的class属性,后续可以通过修改引用的css来美化代码样式.可以说也是具有一定的灵活性.

小例子

/*
 *    check the time ,disable update post_name where it is already unix time
 *      newest version goto: http://tunps.com/code-on-web/
 */
function is_valid_unixtime($timestamp)
{
    return preg_match('/^[0-9]+$/',$timestamp) && strlen($timestamp)&gt;=10 && strlen($timestamp)&lt;=13;
}

Feature

  • 支持多种语言,AppleScript、ActionScript、Bash、CodeFushion、C++、C#、CSS、Delphi、Diff、Erlang、Groovy、Java、JavaFx、Javascript、Perl、PHP、Plaint、PowerShell、Python、Ruby、SASS、Scala、SQL、VB、XML等,如需更多语言,可以自己写Brush,规范是很简单的。
  • 支持行号显示、已经定义起始行号数字。
  • 支持0填充行号。
  • 支持单行或者多行的高亮显示。
  • 支持混合HTML语法高亮(PHP、ASP等脚本都可以混合HTML)。
  • 支持Smart-Tab,让缩进对其,并且可以自己Tab大小。

usage

首先需要在您贴代码的博客或者网站引用SyntaxHighlighter的主题CSS,默认的是shCoreDefault.css.

如果是wordpress,可以在主题文件夹里面的header.php适当位置添加代码:

<link rel="stylesheet" type="text/css" media="all" href="<?php echo site_url('/YourCSSPath/shCoreDefault.css'); ?>" />

最新版本请到 http://tunps.com/lab/cow/

在"源代码"文本框中输入代码,然后进行各种设置,点击"转换"按钮,复制生成的"HTML代码"文本框的内容到文章即可.

changelog

  1. r3 2011.06.13 using external css file instead of inline style , so we can generate less code and configuring code stylesheet can be more flexible.
  2. r2 2011.06.12 fix bug: white-space:nowrap didn't work on Opera
  3. r1 2011.06.07 initial release

feedback

如果在使用中有任何的问题,请在本文下面写上你的评论。谢谢支持