diff --git a/source/docs/plugins/index.markdown b/source/docs/plugins/index.markdown index 797ca74..e17baba 100644 --- a/source/docs/plugins/index.markdown +++ b/source/docs/plugins/index.markdown @@ -14,6 +14,7 @@ Octopress ships with the following plugins. Many have been written specially for - [Code Block](/docs/plugins/codeblock/) - *for sharing code with titles and links* - [Include Code](/docs/plugins/include-code/) - *embed code from your filesystem with a download link* - [Gist Tag](/docs/plugins/gist-tag/) - *automatically downloads and embeds Github gists* +- [jsFiddle](/docs/plugins/jsfiddle-tag/) - *embeds code from jsFiddle* - [Image Tag](/docs/plugins/image-tag/) - *easily post images with class names and titles* - [Render Partial](/docs/plugins/render-partial/) - *insert any file into another post or page* - [Block Quote](/docs/plugins/blockquote/) - *generate beautiful, semantic block quotes* diff --git a/source/docs/plugins/jsfiddle-tag/index.markdown b/source/docs/plugins/jsfiddle-tag/index.markdown new file mode 100644 index 0000000..9a088a9 --- /dev/null +++ b/source/docs/plugins/jsfiddle-tag/index.markdown @@ -0,0 +1,38 @@ +--- +layout: page +title: "jsFiddle Tag" +date: 2011-09-26 12:33 +sidebar: false +footer: false +--- + +All you need is the fiddle's id and you can easily embed it in your page. + +#### Syntax + {{ "{% jsfiddle shorttag [tabs] [skin] [height] [width]" }} %} + +#### Example + + {{ "{% jsfiddle ccWP7" }} %} + +{% jsfiddle ccWP7 %} + + +#### Adjusting Tabs + +It’s possible to easily adjust the display order of the tabs. In this case, I’m moving the result to be the first item shown. + + {{ "{% jsfiddle ccWP7 result,js,html,css" }} %} + +{% jsfiddle ccWP7 result,js,html,css %} + + +#### Presentation: Skin + +We can easily adjust the skin. Right now, it looks like light and presentation are really the only supported options, but if jsFiddle announces new options, you can start using them immediately. + + {{ "{% jsfiddle ccWP7 default presentation" }} %} + +{% jsfiddle ccWP7 default presentation %} + +This plugin was developed by [Brian Arnold](http://brianarn.github.com/blog/2011/08/jsfiddle-plugin/).