This bookmarklet lets you grab code from tutorials all over the internet and play with them on CodePen. Drag the Codepen box to your toolbar and visit a tutorial. When you click the bookmarklet, it'll highlight all the code examples on the web page.

index.html

<h1>Code Pen Bookmarklet</h1>
<p>Drag the box below to your bookmarks toolbar. Then click it when browsing around the internet and find some code you want to play with. You'll be able to select the blocks of code you want by clicking on them and then easily bring them over to CodePen to play!</p>
<div class="bk-highlight">
<a class="bookmarklet" href="">CodePen</a>
</div>

script.js

var bkjs = "javascript:function __cp(){var h=document,g=h.createElement("script"),c=h.location,a=h.body;try{if(!a){throw (0)}g.setAttribute('src',c.protocol+'//assets.codepen.io/assets/bk/bk.js?t='+(new Date().getTime()));a.appendChild(g)}catch(f){alert('Try again when the page loads.')}}__cp();void (0);";

$('a').attr('href', encodeURI(bkjs));

style.scss

@import "compass";
body {
  color: white;
  background-color: #222222;
  font-family: Arial;
}

h1, h2, h3 {
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.bk-highlight {
	
	padding: 15px;
}

div.bk-highlight a {
  font-size: 24px;
  line-height: 110%;
  color: white;
  text-decoration: none;
  padding: 15px;
  border: 4px solid #76DAFF;
}