在octopress中加入jsfiddle

jsFiddle是一个web开发人员的练习场，一个可以在很多方面应用的工具。我们可以用他来在线编辑一些HTML,CSS,javascript片段。你编辑的代码可以与其他人分享，或嵌入你的博客等。使用这个工具，javascript的开发者可以很容易的发现并解决BUG问题。你还可以选择你自己熟悉的流行的各种javascript库来进行开发，对XHR的支持也非常好，还可以模拟一些响应等。

今天我们来学习将jsfiddle插件放入到octopress中。

下载jsfiddle插件

先用git命令将插件下载下来

git clone https://github.com/ShaunaGordon/octopress-jsfiddle.git

然后将里面的jsfiddle.rb拷贝到 /plugins中

一般语法

{% jsfiddle shorttag [tabs] [skin] [height] [width] %}

缺省值如下:

tabs: js,resources,html,css,result
skin: light
height: 300px
width: 100%

如果你就想设置height，而前面几个值都用默认的，那么填default就行了

举例

这里我直接拿张磊的代码作为测试

{% jsfiddle LHWmv result,js,html,css presentation 500px %}

结果

总结

jsFiddle以前在张磊的博客看见的时候挺新颖的，现在在自己的blog里加上这个插件还是分外激动的，以后就不用上面一段代码，下面一个演示那么墨迹了。