ゆっくりでいいさ

上回说到实现了各种文件的上传，正要给attachment.php实现高亮显示源代码……(天外音——pia飞)。

先上Demo:
source code (ZOJ2705.cpp)

在wordpress的template hierarchy里，对附件显示(attachment display)的处理，wp会按照

1. MIME_type.php – 可以是任意的MIME，对于type/subtype，比如text/plain会按照：
   1. type.php (e.g. text.php)
   2. subtype.php (e.g. plain.php)
   3. type_subtype (e.g. text_plain.php)
2. attachment.php
3. single.php
4. index.php

的顺序，调用第一个主题(theme)中可用的php文件。wp模认主题里没有attachment.php，我所用的主题mandigo里提供有attachment.php，对于图片，会显示缩略图(thumbnail)，而对于其他文件，只显示一个图标(icon)和文件标题(title)。而我希望对于上传的源代码，可以直接显示代码内容，最好还是语法高亮的。因为很多时候我们只是想简单的看一下代码，这样也要下载太麻烦了，而且硬盘空间可能不够（……几k的空间都没有么……），提供预览也能排雷，下了个假档影响多不好啊。

为了达到这一目的，图方便，我直接对attachment.php文件进行了hack，首先加入了下面这一段代码：

blog里经常需要贴一些代码，平时用SyntaxHighlighter直接贴在文章里是一个不错的选择，但遇到写一套题的解题报告这样的情况时，贴过多的代码显得很违和，容易喧宾夺主，可以改用附件(attachment)的形式贴在解题报告中。可惜wordpress by default不支持cpp文件，如果尝试在Media – Add New中上传cpp文件，会得到”Error saving media attachment”的错误。一个变通的办法是把扩张名改为txt上传。事实上wp虽然不支持cpp文件，但却支持cc文件，这里有一个完整的支持列表。

改扩展名上传文件不是一个干净的做法，对上传，下载着都不方便。要添加额外的文件类型，比如cpp和php，可以用下面的api来增加允许上传的mime：

function add_upload_mime($mimes = '') {
	$mimes['cpp'] = 'text/x-c++src';
	$mimes['php'] = 'application/x-httpd-php';
	return $mimes;
}
add_filter('upload_mimes', 'add_upload_mime');

不过还是用现有的plugin比较方便，PJW Mime Config就是一个这样的plugin。

这样虽然解决了上传php文件的问题，但是下载却出现了问题。对于txt文件，通常将直接再浏览器打开；对于cpp文件，通常会弹出一个下载对话框；但对于php或其他cgi文件，服务器将会执行它，返回的是执行结果，而不是源文件，或者出现HTTP 500。所以需要更改服务器设置，将这些后缀的文件当成普通文件处理，对于lighttpd，可以在lighttpd.conf中对上传文件夹upload这样设置：

$HTTP["url"] =~ "^/blog/wp-content/uploads/" {
	cgi.assign = ()
	fastcgi.server = ()
	static-file.exclude-extensions = ()
}

附件上传的问题就这样解决了，下一步就是要扩展attachment.php的功能，使得源代码能供直接再attachment页面内通过语法高亮显示出来。

寂寞的时候做做搬运工，所以blog需要一个flash播放器，也不知道哪个好，看wordTube下载数多，于是相信群众。
在wordTube的配置里做了很多修改，最主要的就是把原来的Default size (W x H) 320×240改成400×320。但是杯具的发现修改后视频的大小依然是320×240。

看了一下，问题应该出在admin/functions.php的wt_add_media函数里，里面有伟大的硬编码

$act_width  = 320;
$act_height = 240;

也就是你加入meida的时候，它54了你的设置，320×240又回来了。

在lib/wordtube.class.php的ReturnMedia函数里有生成html的代码

$width  = ( $width  == 0 ) ? $this->options['media_width'] : $width;
$height = ( $height == 0 ) ? $this->options['media_height'] : $height;

结果这里$width和$height万年为320和240。简单粗暴的解决方法就是将其改成

$width  = $this->options['media_width'];
$height = $this->options['media_height'];

反正目前的问题解决了，其它bug暂且54。拿两个神作测试一下。

wordpress提供有more标签，其作用就是在index里只显示文章的一部分，避免一页太长，点击链接后则可以看到全文。使用方法非常简单，在你想截断的地方加一个html注释

<!--more-->

就可以了。在mandigo主题里产生的超链接的文字为”Read the rest of this entry”，这是可以通过对主题代码的修改来个性化的。

个性化more标签我一直很想要的效果就是东方系列里载入过程的那段”少女祈祷中…”动画。不过我没有在网上找到其gif动画，自己尝试从东方花映冢中提取素材也以失败告终，所以就只好使用文字版的了。一个偶然的机会，我在这里意外发现了其flash动画版，而且颜色还正是我要的粉红色，真是踏破铁鞋无觅处 ，得来全不费工夫。当然虽然我无耻的rob了这个flash，但把它实际加到blog里还是要花点功夫的。这个flash动画不知为什么留了很奇怪的白边，而我不会flash，修改不能，向范叔求教，结果被鄙视了。然后考虑用工具把flash转成gif动画，再把多余的边剪掉，结果发现转换出来的gif变大了几十倍不说，效果也差很多，于是此路不通。最后想了一招，flash保留原样，在blog里通过css把多余的边“剪”掉。几经修改，最后html代码

<object
    style="margin: -40px -81px 0 -192px" standby="少女祈祷中..."
    data="http://watashi.ws/blog/wp-content/uploads/2009/12/NowLoading.swf"
    type="application/x-shockwave-flash" width="375" height="82">
    <param value="http://watashi.ws/blog/wp-content/uploads/2009/12/NowLoading.swf" name="movie">
    <param value="false" name="menu"><param value="high" name="quality">
    <param value="transparent" name="wmode">
</object>

的效果

最后把这个效果加到blog里去，实际加的时候把html和css分离开来。首先修改主题的Stylesheet (style.css)，在最后加上

.more_flash {
    margin: -40px -81px 0 -192px;
}

然后修改主题的Main Index Template (index.php)，

As I cannot find any appropriate haskell brushes for SyntaxHighlighter, I developed one by myself. You can download it here, I do hope it will be helpful. If you find any bugs or have any suggestions, please comment here or email me.

SyntaxHighlighter提供了大多流行语言的Brush，但是相对而言支持的语言还是比较少的。如果你需要的某种语言不幸不在支持列表内，那么你还可以求助于第三方Brush，这里有一个更加丰富语言列表，不过不是所有的语言都有对应的Brush。更不幸的是，我需要的Haskell语言甚至都不在这个列表里。google了一下还是看到有别人写的Brush，不过功能实在有点弱，所以我开始按照Handy Custom Brushes Development Guide自己写一个Haskell Brush。

在Guide的指导下，在参考着其他语言的Brush和其他平台下Haskell的高亮配置文件，我自己的shBrushHaskell.js也有模有样的完成了。最后要做的就是把它加到wordpress的plugin里，参照Adding A New Brush (Language)便能很容易完成。事实上在在我使用的SyntaxHighlighter Evolved里只要先把shBrushHaskell.js上传到合适的位置，比如$plugin_dir/watashi-no-brushes，再对syntaxhighlighter.php做两处修改就好了：

1. 在一堆wp_register_script中间插入一句

   /* register my brush */
   wp_register_script('syntaxhighlighter-brush-haskell', plugins_url('syntaxhighlighter/watashi-no-brushes/shBrushHaskell.js'), array('syntaxhighlighter-core'), '20091224'); // ADD_THIS_LINE
   

2. 再添加映射

   $this->brushes = (array) apply_filters( 'syntaxhighlighter_brushes', array(
       /* ... */
       'haskell' => 'haskell', // ADD_THIS_LINE
   ) );
   

大功告成。

首先拿A + B Problem做个测试：

main = do
    input <- getContents
    putStr $ unlines $ map show $ doEMP $ map read $ words input

doEMP [] = []
doEMP (a:b:o) = a + b : doEMP o

再加两个demo，第一个是ProjectEuler的41：