轻松制作代码高亮在线版

2013-11-10

写技术文章的基友们都知道有一个强大的代码高亮工具CodeRenderUnmi，原身是一款轻量级软件，绿色免安装，使用也方便，看到有几个制作出代码高亮在线版的网站页面，觉得真心不错，碎碎念心想，假如把这个高亮工具整合到我的网站上，那以后编辑的时候就不用打开电脑一个文件夹一个文件夹地找软件了，直接打开工具箱，啪！前端工具应有尽有，更主要的是，不论在哪里编辑文章，都不用带着U盘啦，无需携带呀！

支持MarkDown 代码高亮的站点请跳过本文

本着不折腾就蛋疼的信念，碎碎念也着手开始捣腾，先是在度娘和谷歌上大搜了一番，除了看到已经完全做好的页面，就是知更鸟网站的一篇介绍了，不过，老实说，并没有做过多的详细制作过程，在小白的我看来，只能是云里雾里了。索性，从源码扒皮做起好了，于是从多个相似的代码高亮工具上开始查看源码的共同点，最后发现，所有的页面源码都离不开CodeRenderUnmi软件的源码。使用过这款软件的人都知道，这个软件木有传统的.exe文件，倒是有一个不常见的.hta（HTML应用程序）文件，这倒是显得碎碎念孤陋寡闻了。

以下是度娘对于.hta文件的解释：

HTA是HTML Application的缩写（HTML应用程序），是软件开发的新概念，直接将HTML保存成HTA的格式，就是一个独立的应用软件，与VB、C++等程序语言所设计的软件界面没什么差别。

HTA与普通的网页结构差不多，所以设计出来很容易，当然HTA还有许多自己独特的属性；

HTA对语法的要求比HTML还要松，甚至连；、；等标记都可以省略；

~~用；来设定HTA应用程序的外观，如标题栏、边框大小等，必须放在；中。~~（这点有必要说一下，制作在线版的时候就可以剔除掉这部分的信息，因为我们通过CSS来设定外观。）
更详细的内容，大家可以百度百科搜一下“HTA”。

好吧，小白的内容over了，了解了这样的背景，我们就可以直接把.hta文件转换成HTML文件，甚至是PHP文件，其实都没有太大的区别，主要是编码问题。

一、转换.hta文件为.php页面模板

首先，我们在一个新的文件夹code中新建一个coderender.php文件，将CodeRender.hta文件用editplus等编辑器打开，注意，不要用系统默认的记事本之类，太鸡肋了。用Editplus将CodeRender.hta的源码复制到coderender.php，并将coderender.php文件编码从ANSI修改为utf-8。

然后，复制highlight.css和shCore.js文件到文件夹code中。接下来，我们修改coderender.php文件中这些地方：

1.剔除无效代码

<HTA:APPLICATION  
APPLICATIONNAME = "CodeRender(Code2Html)--Unmi(http://unmi.blogjava.net)"  
SCROLL = "no"  
MAXIMIZEBUTTON = "no"  
ICON = "CodeRender.ico"  
SINGLEINSTANCE = "yes"  
VERSION = "1.0.1"  
CONTEXTMENU = "no">

这一部分属于软件外观设定的代码，在html页面上并没有作用，所以我们可以剔除掉。

2.修改javascript部分源码

将第265行的

document.getElementById("htmlCode").value = highlighter.div.outerHTML.substring(2);

括号中的数字去掉。
这一步如果不修改，在线转换出来的代码会被缩进2个字符（<d无法显示），导致每次使用都要手动添加。

3.修改CSS和JS文件调用路径
如果要把这个coderender页面嵌入到你的WP博客中，那么就需要重新整理highlight.css和shCore.js文件，将其归类到CSS文件夹或JS文件夹，同时修改路径，如下，具体路径视主题内置文件夹结构而定，本例中，将coderender.php与页面模板平级归类，css文件放置于includes文件夹中，js文件归类到js文件夹：

<LINK href="<?php bloginfo('template_url'); ?>/includes/highlight.css" type="text/css" rel="Stylesheet">  
<SCRIPT src="<?php bloginfo('template_url'); ?>/js/shCore.js" charset="utf-8"></SCRIPT>

另外，还需要在coderender.php文件的顶部加上：

<?php  
/* 
Template Name: coderender 
*/  
?>

假如仅仅作为工具页面使用，则这一步可以跳过。以所有文件平级存放于code文件夹内为例，修改coderender.php文件名为index.php，打开页面路径则为：domain.com/code/。

最后，对coderender.php文件进行语法检查和标注检查，消灭不规范标注和无效标注，修改CSS，使页面更加美观。

~~参考页面：http://zhuweisheng.com.cn/coderender~~

下载CodeRenderUnmi软件：
CodeRenderUnmi 密码: xq0f

对本文有任何疑问或者制作过程发现问题的，欢迎各位基友多多反馈！

下载代码高亮在线版源码（适用于wordpress页面模板）：

key:hcdk

吹完了，噢了~~

END————THANKS FOR READING !