markdown文件的编辑以及实时预览

之前看到有一款叫Mou的软件可以编辑markdown格式的文本内容并且实时预览,可是我比较喜欢用vim编辑器,所以就想着能不能用别的软件配合着来实现实时预览。

今天看到一个chrome的扩展叫markdown preview,它可以自动把md或markdown后缀的文本转换为html格式在chrome中查看,只是还欠缺一个自动刷新的功能。然后我看到它的源码已经放在github上,于是抓回来做了一些修改,加上了自动刷新的功能。

演示

尝试了一下在vim中编辑文件,然后在chrome中浏览,效果还不错,见下图:

\"效果图\"

更改后的扩展

我把修改后的markdown preview插件放在github上 , 已经尝试向原作者发起pull requests,要试用的话需要按下面几步操作:

  1. 把插件的代码clone回来 git clone git://github.com/volca/markdown-preview.git
  2. 开启chrome扩展的开发者模式,具体位置在窗口 -> 扩展程序
  3. 载入正在开发的扩展程序
  4. 允许访问文件网址勾选上

然后你就可以尝试用chrome浏览器打开markdown文件预览html,采用趁手的编辑器去修改它。

BTW

  • chrome下的插件写起来比想像的要简单,写javascript就是了
  • 现在这篇blog即是我用markdown格式写成的,用到了wordpress的markdown on save扩展。

Update

  • 测试把文件放在dropbox的Public下,修改之后的效果能够立刻在共享链接里看到效果,很完美

git svn实战

我之前写了几个wordpress插件,比如inline-javascript, code-prettify。这些插件都托管在wordpress.org提供的svn服务器上,但是我实在太喜欢在git下活动了,因此动了点心思,想把插件代码传到github上,开发完之后利用git-svn传到wordpress的svn服务上。

照着这个思路,捋起袖子就开干了。

用git-svn抓取插件代码

wordpress的插件svn库大且缓慢,如果直接用git-svn去clone代码,一定会慢死,所以我按照以前的笔记,用git从大型svn快速clone代码

以code-prettify插件为例,首先需要读取这个插件创建时的版本号

svn log http://svn.wp-plugins.org/code-prettify|tail -4|head -1

得到了如下信息,获得一个版本号 318479

r318479 | plugin-master | 2010-12-03 20:12:29 +0800 (五, 03 12 2010) | 1 line

开始clone代码

git svn clone -s --prefix=svn/ -r318479:HEAD http://svn.wp-plugins.org/code-prettify

设置git仓库

首先把代码传了一份到github: https://github.com/volca/code-prettify

然后操作本地git仓库

git branch -m svn
git remote add origin git@github.com:volca/code-prettify.git
git checkout master

本地svn分支对应svn的远程仓库,本地master分支对应github的远程仓库

Happy time

现在可以按照平常的习惯在git下更改代码,然后用git push到github上。

如果需要更新代码到svn上,按这个流程操作就可以了:

git checkout svn
git merge master
git svn dcommit

如果需要发布wordpress插件的新版本,这个在svn里就是一个打tag的过程,用git-svn操作非常简单,下面的例子表示发布code-prettify插件的0.3版本:

git svn tag 0.3

code-prettify — wordpress语法高亮插件

最近基于google-code-prettify实现了一个代码高亮的wordpress插件 — code-pretttify,测试了下效果还不错,所以我马上把全站的代码高亮插件换成了这个。

这里是code-prettify的项目主页,我会把这个plugin的最新情况更新在这里。

code-prettify的特点

  • 完全由javascript完成代码高亮,不占用服务器资源
  • 使用简单,只要用<pre><code>和</code></pre>包住代码,发布即可,这是wordpress编辑器自带的quicktag。
  • 没有添加额外的hook,所以不会和别的wordpress插件产生冲突,绿色无污染
  • 载入速度很快,因为js是在页面尾部加载的,不会堵塞页面的载入!

代码高亮效果演示

eg:


<pre><code>
class BigBang {
    function blah() {
        echo "Hello ooso.net";
    }
}
</code></pre>

Effect:


class BigBang {
    function blah() {
        echo "Hello ooso.net";
    }
}

测试objective-c的code prettify效果

TTImageView *thumb = [[[TTImageView alloc] initWithFrame:CGRectMake(30, 30, 0, 0)] autorelease];
[thumb setAutoresizesToImage:YES];
[thumb setURL:@"http://farm4.static.flickr.com/3163/3110335722_7a906f9d8b_m.jpg"];
[self.view addSubview:thumb];

code-prettify下载

暂时把代码托管到github.com/volca/code-prettify,所以你可以直接使用git下载代码,或者直接从github下载现成的zip包。

代码非常简单,如果你有合适修正,可以试着用github推给我。

Update

另外安装了一个全新的wordpress测试,发现一些bug,因为wordpress默认对文本进行格式修正,在代码后面添加了很多br以及p标签,导致插件失效,所以我不得已用php替换了一些内容保证插件的正常运行。

如何让WPTouch和WP Super Cache同时工作

为了让blog在手机上看起来更舒服,所以我安装了一个wordpress插件叫WPTouch。安装成功之后的效果图如下:

wptouch

我原来还安装了一个叫WP Super Cache的插件,如果这个插件开启的话,在手机上就看不到上图的效果,应该是手机也访问了页面的缓存。简单的解决步骤如下:

    1. 登录到wordpress后台
    2. 选择设置 -> WP Super Cache
    3. 在Advance mode下勾选Mobile device support并保存
    4. 按照提示点击”Update Mod_Rewrite Rules”

这样就生效了。

BTW:以上步骤实际上是更新了文件.htaccess以及wp-content/wp-cache-config.php

wordpress plugin “search engine related posts” 1.2发布

去年写了个wordpress插件”search engine related posts“,不知不觉也有将近一年没有更新过了。这个插件的作用:当用户从google搜索到你的博客上,自动显示站内搜索相关的主题。这里没有用到数据库来做相关的搜索工作,而是利用google公开的一些api进行查询,因此对个人博客来说,不会增加服务器负载,完全只是一段js代码而已。

本次1.2相对第一个版本的改动

  • 将javascript提取出来放到单独的js文件里,这是为了减小每个url的大小,浏览器也会对外部js进行缓存,有效的减少带宽输出
  • js文件已经用yui compressor压缩过,只有900多个字节
  • 支持多语种搜索,修改文件中的$related_posts_lang变量即可,中文用户需要将这个值修改为zh-CN(默认是en-US)
  • 可以去除网页标题中的站名以及部分连接字符,让标题更简短且有意义

下载search engine related posts 1.2

http://wordpress.org/extend/plugins/search-engine-related-posts/

升级到wordpress 2.6失败

第一时间往wordpress 2.6升级,这次不像往常那么顺利,升级完成之后给了一个好大的404错误提示页。根据往常的经验,这个应该是Permalinks的rewrite规则出现了问题,删除wordpress自动生成的.htaccess,就能显示首页,但是内容页通通显示无法找到 T_T

wordpress的支持论坛上也看到有相同情况的人,为数不少,看来2.6还真是个有瑕疵的版本。解决办法:

给category和tag都设置一个初始值,比如category以及tag

我的Permalinks是/index.php/archives/%post_id%,因为原来的服务器不支持rewrite..

基于yui grids的wordpress主题 — YUI Autogrid Minima

yuiblog上看到这个基于yui grids的主题,样式简单到了不行,可能正是某些人喜欢的类型。贴图为证:

yui_grids wordpress theme

YUI Autogrid Minima主题的特点

  • 干净简洁的html标签
  • 布局会随着浏览器的大小自动调整,可以试着拖拽浏览器边框,会发现怎么也不出现横向滚动条,侧边栏会自适应宽度
  • 固定不动的侧边栏,像某些对联广告一样
  • 还是那句,样式朴素到了不行

[你可以点击这里下载这个主题.]

wordpress plugin – search engine related posts

Table of content

Description

English version

When someone is referred from a search engine like Google, the plugin show your blog content matched the terms they search for.

中文说明

当用户从google搜索到你的博客上,这个wordpress 插件会根据用户搜索的关键词显示你的博客上更多的相关内容。目前也只对google生效,下一个版本将对baidu生效。

这个插件完全使用javascript加上google的api完成,不需要占用服务器端的资源,环保且安全。

Usage

English version:

  • unzip it
  • Put <div style=”display:none” id=”search_content”></div> at the place in your template where you want the list of related posts
  • Copy search_related_posts.php to direcotry wp-contents/plugin and activate the plugin.
  • done!

中文说明:

  • 解压
  • 在wordpress模板中添加一个id为search_content的html标签,比如
  • 复制search_related_posts.php到wp-contents/plugin目录,并激活插件.
  • done! 现在你可以试着从google搜索上先搜到自己的博客,然后点击进去看看插件的效果。

Download

latest search engine related posts

History

在wordpress.org上提交了inline-js

前几天在wordpress.org的plugin list里提交了inline-js,这是我写的第一个wordpress插件,估计实用价值和使用者都不是太多:)但是我想如果有更多的使用者对这个plugin提一些意见的话,可能会更加完善,很希望能看到这个插件能持续发展,如果我能挤出更多的时间来维护的话。

升级到wordpress 2.5 RC1

迫不及待的升级到了wordpress 2.5 RC1。升级过程还算顺利,就是上传的时候多花了点时间。wordpress 2.5最大的改变就是后台部分,由深蓝白底变成了浅蓝白底,导航和写文章的页面修改很成功,用起来颇为顺手,这也是我升级的最大动力之一。

插件方面,兼容性良好,总体来说,这是一次成功的升级,胜利的升级。