Posts Tagged “plugin”

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

先上Demo:
icon-icpc-smallsource code (ZOJ2705.cpp)
attachment-demo

在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,首先加入了下面这一段代码:

Comments 6 Comments »

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页面内通过语法高亮显示出来。

Comments 1 Comment »

寂寞的时候做做搬运工,所以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。拿两个神作测试一下。

Comments 1 Comment »

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
    ) );
    
  3. 大功告成。

首先拿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:

Comments 5 Comments »

我想我和我周围的许多人都会需要在blog中贴些代码以拼凑版面丰富内容,而没有高亮的代码是不能看的,于是再度求助于wordpress插件。比较好的代码语法高亮库有,GeSHi, SyntaxHighlighter 2.0google-code-prettify,他们也都有不只一个对应的wordpress插件,安装后就可以直接用了。这三个库各有千秋,我的体验如下:

首先是语言支持方面。GeSHi支持的语言太tm妈多了(有paper指出这里tm是对多的强调,避免歧义),其高亮也要比另外两个强大,可以识别更多的语法元素;google-code-prettify也支持不少语言,而且还有相当浮云的自动语言识别功能,可是对显示行号的支持不咋的;SyntaxHighlighter这方面要逊色一些,早先的版本连perl都不支持>_<,默认识别的语法元素也不那么多。

然后比较一下显示效果,SyntaxHighlighter无疑是大优势胜出,还有view source, copy source, print这样的浮云功能。另外两个风格比较接近,GeSHi的格式似乎丰富一些,不过有时候却反而显得有点乱,不过这些显示效果都可以通过修改css改进。最主要的一点,也是让我坚定选择SyntaxHighlighter的原因在于,SyntaxHighlighter能够处理自动换行,还可以在自动换行处加上标记。而其他两个把代码放在pre标签中,其结果就是当一行代码稍长的时候,右边部分会看不到,或者会把所在div撑大,结果破坏整个页面的结构!对此已有体会。

最后说一下扩展性。理论上三者都可以扩展,而SyntaxHighlighter的扩展一个新的语言是非常简单的。当然像GeSHi都支持那么多语言了,估计也用不着扩展了。此外SyntaxHighlighter也有着更多的属性可以配置。

比较之后,我选择了使用SyntaxHighlighter的插件SyntaxHighlighter Evolved。在setting页面你可以对行号,工具栏和tab宽度等设置,还可以选择eclipse, emacs等颜色主题。

最后用A + B Problem来测试一下效果。A + B Problem

Comments 4 Comments »