mirror of
https://github.com/jsbin/jsbin.git
synced 2026-01-18 15:18:04 +00:00
38 lines
2.0 KiB
Markdown
38 lines
2.0 KiB
Markdown
# Embed
|
|
|
|
User includes `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:
|
|
|
|
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="http://jsbin.com/abc/edit">Edit this example</a>
|
|
|
|
Full embed that only includes the JS & Live output
|
|
|
|
<a class="jsbin jsbin-embed" href="http://jsbin.com/abc/edit?live,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="http://jsbin.com/abc/edit">Edit this example</a>
|
|
|
|
## Scoop links
|
|
|
|
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>
|
|
|
|
The JavaScript will transform the link to something like: jsbin.com/abc/edit?live,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 jsbin.com
|
|
|
|
## 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.
|