How to display_fiddle_from_gist

How to display Fiddle from Gist

@imehrMehran MozaffariCreated by:

Saturday, 3 March 12

https://twitter.com/%23!/imehr






Creating a fiddle on the fly and fill it with some demo codes from a gist and be able to try the code with all library dependencies on Jsfiddle.net.

The goal


A multi files gist, hosted on gist.github.com

STEP 1


Just enter a URL with a very basic api

and then...

STEP 2


You will get a fresh new fiddle filled up with all codes, coming directly from that gist and ready to try in Jsfiddle.

STEP 3


Go to gist.github.com and create a new gist.


http://gist.githum.com



This description field can be anything to explain what this gist is all about.








The file names in this gist are important to follow a specific pattern.








Allowed file names• fiddle.js• fiddle.html• fiddle.css• fiddle.manifest• fiddle.response.html







Got to gist.github.com and create a new gist.

Allowed file names• fiddle.js• fiddle.html• fiddle.css• fiddle.manifest• fiddle.response.html

CSSHTML

JAVASCRIPT

AJAX RESPONSE / PAGE RENDER

INFO AND RESOURCES



Allowed file names

Write your CSS code here. This code will be used in CSS pane inside the fiddle later on.






Click here and add another file to your gist and name it fiddle.html.






This code will show up under HTML pane inside the fiddle.





Got to gist.github.com and create a new gist.Add another file to this gist and name it fiddle.js and write all you JS codes here. This code will show up under Javascript pane in fiddle.





This would be your JS code in fiddle.





fiddle.manifestis a description of the gist written in YAML, the structure is compatible with the MooTools doc.





fiddle.manifestis a description of the gist written in YAML.The content of this manifest will show up under info tab in the fiddle.




Got to gist.github.com and create a new gist.fiddle.manifest (in YAML format)

name: the title of this code or appdescription: description about this codeauthors:

- author 1 - author 2- ...

resources:- http://....link to a js file- http:// ... link to a css file- ...

normalize_css: yes / no




After creating a new gist with multiple files, you can easily run it inside a fiddle by using the following api. Just enter the URL with the following pattern in your browser and all those files inside the gist will come together in one fiddle.

http://jsfiddle.net/gh/gist/{framework}/{version}/{gist_id}/

Making the fiddle URL

http://jsfiddle.net/gh/gist/mootools/1.2/606699/


http://jsfiddle.net/gh/gist/%7B




You can add an extra option to indicate all dependencies related to this gist codes. In order to indicate those dependencies use a comma separated list of those dependencies as the following format:

http://jsfiddle.net/gh/gist/{framework}/{version}/dependencies/{dependencies_list}/{gist_id}/

The fiddle URL with extra option

http://jsfiddle.net/gh/gist/jquery/1.4.4/dependencies/lint,ui/606699/










http://jsfiddle.net/gh/gist/mootools/1.2/606699/https://gist.github.com/606699/https://github.com/jsfiddle/jsfiddle-docs-alpha/blob/master/docs/use/gist_read.rsthttp://doc.jsfiddle.net/http://jsfiddle.net/

http://mehrjs.com@imehrCreated by:Mehran Mozaffari

Resources






https://gist.github.com/606699/

https://gist.github.com/606699/

https://github.com/jsfiddle/jsfiddle-docs-alpha/blob/master/docs/use/gist_read.rst

https://github.com/jsfiddle/jsfiddle-docs-alpha/blob/master/docs/use/gist_read.rst

http://doc.jsfiddle.net

http://doc.jsfiddle.net

http://jsfiddle.net

http://jsfiddle.net

http://mehrjs.com

http://mehrjs.com



Technology

How to display_fiddle_from_gist