http://jsbin.com/js/embed.js in their code - probably in the footer - it runs one doc ready. As a user I have a few options:
- full embed - pulls an existing jsbin directly in to my site (though url can prefine which panels to show)
- mixed embed - mixes existing content in my site with a predefined jsbin - enabling me to template code
- scoop links - allows me to pass through to jsbin, but it carries through the code from the site
A mini JS Bin embed in their site via an iframe - since the height is flexible inside jsbin, user can style the iframe that's generated.
<a class="jsbin jsbin-embed" href="http://jsbin.com/abc/edit">Edit this example</a>
Full embed that only includes the JS & Live output
Mixed embed, that references existing code in my blog and uses the template on the endpoint to run the example:
?? Question - should this try to detect the type of language based on the first few lines, and therefore insert in the best place?
<a class="jsbin jsbin-mix-embed" rel="#mycode-example1" href="http://jsbin.com/abc/edit">Edit this example</a>
By clicking on this link, I'll arrive on jsbin.com with the "abc" existing code, and the code from
#mycode-example1 inserted in to the correct place (possibly detecting which panel to show too). This is achieved with:
<a class="jsbin jsbin-scoop" rel="#mycode-example1" href="http://jsbin.com/abc/edit">Edit this example</a>
Example usage: on jQuery UI site, much easier if I could just add a link that says to scoop up the existing code and splat in to jsbin.com
If we're really smart, we could go hunting for the closest
<pre> element by looking through the parent elements to the link found.