A web page created at CodePen.io.

index.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));

markup.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>

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;
}