Skip to content
This repository
tree: 423db89cf7
Remy Sharp July 05, 2012
file 38 lines (20 sloc) 2.011 kb


User includes in their code - probably in the footer - it runs one doc ready. As a user I have a few options:

  1. full embed - pulls an existing jsbin directly in to my site (though url can prefine which panels to show)
  2. mixed embed - mixes existing content in my site with a predefined jsbin - enabling me to template code
  3. scoop links - allows me to pass through to jsbin, but it carries through the code from the site

Example of full embed

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="">Edit this example</a>

Full embed that only includes the JS & Live output

<a class="jsbin jsbin-embed" href=",javascript">Edit this example</a>

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="">Edit this example</a>

Scoop links

By clicking on this link, I'll arrive on 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="">Edit this example</a>

The JavaScript will transform the link to something like:,javascript=[some escaped javascript]

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

Removing the rel attribute

If we're really smart, we could go hunting for the closest <pre> element by looking through the parent elements to the link found.

Something went wrong with that request. Please try again.