CodePen is a new site like our beloved jsFiddle.

I like it for two reasons.

  1. Zen Coding
  2. It has an API

So, with the latter I created a bookmarklet. It guestimates what each block of code is (HTML, CSS, JavaScript), on a Stack Exchange page. It sends that code to CodePen and then redirects you there.


  • SO Question -> CodePen Title
  • Question's last sentence -> CodePen description
  • Recognizes these tags: jquery, mootools, prototype, less, sass, scss, slim, haml, and coffeescript
  • For each tag it loads/pre-processes automatically
  • And, of course, it tries to put your code in the right sections (based on punctuation)


Copy this code to your clipboard. Create a new bookmark. Right click it, and choose Edit. Paste in the URL's spot. Give it a witty name, and save :-)

javascript:var css=[],js=[],html=[],jq=false;$(".postcell pre").each(function(e,t){
var n=t.innerText,r=n.length,i=function(e){var t=0;for(var i=0;i<r;i++)
{e===n[i]&&t++}return t},s=i(":"),o=i(";"),u=i("<");u>o?html.push(n):s/o>.9?
css.push(n):js.push(n)});var tags=$(".post-taglist").text().trim().split
(" "),tag=function(e){return tags.indexOf(e)!==-1?e:""},f=$("<form>",
$("<input type=hidden name=data value=''>").attr({value:JSON.stringify
$(".postcell p").last().text(),html_pre_processor:
f.append(i);f.appendTo("body");f.submit();void 0;


Here are some example pages to try it out with,

(I'll find more when I find time.)



You must log in to answer this question.

Browse other questions tagged .