Skip to content

Instantly share code, notes, and snippets.

@JoeRobich
Last active August 29, 2015 14:05
Show Gist options
  • Save JoeRobich/9f8b5a4c24b102132daa to your computer and use it in GitHub Desktop.
Save JoeRobich/9f8b5a4c24b102132daa to your computer and use it in GitHub Desktop.
jsFaddle Bookmark
data:text/html,<title>jsFaddle</title><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/codemirror.min.css"/><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/theme/vibrant-ink.css"/><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/hint/show-hint.css"/><link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/lint/lint.css"/><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/codemirror.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/hint/show-hint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/hint/anyword-hint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/hint/xml-hint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/hint/html-hint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/hint/css-hint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/hint/javascript-hint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/lint/lint.js"></script><script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script><script src="https://rawgithub.com/stubbornella/csslint/master/release/csslint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/lint/css-lint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/lint/javascript-lint.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/search/match-highlighter.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/fold/xml-fold.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/edit/closetag.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/edit/closebrackets.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/edit/matchtags.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/edit/matchbrackets.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/selection/active-line.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/edit/trailingspace.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/addon/display/placeholder.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/mode/xml/xml.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/mode/css/css.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/mode/javascript/javascript.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/codemirror/4.4.0/mode/htmlmixed/htmlmixed.js"></script><style>table{table-layout:fixed;width:100%;height:95%;}iframe{width:100%;height:100%;}td{width:50%;height:50%}.codeMirror{width:100%;height:100%;overflow-y:auto;}pre.CodeMirror-placeholder{color:#555;}.cm-trailingspace{background-color:#FF9191;}</style><input type='button' value='Reset' onclick='reset()' />&nbsp;<input type='button' value='Run' onclick='update()' />&nbsp;<input type='button' value='Share' onclick='share()' /><table><tr><td><textarea id='html' placeholder='html'></textarea></td><td><textarea id='css' placeholder='css'></textarea></td></tr><tr><td><textarea id='js' placeholder='js'></textarea></td><td><iframe id='pre'></iframe></td></tr></table><script>Object.prototype.extend=function(e){for(var k in e)if(e.hasOwnProperty(k))this[k]=e[k];return this};function reset(){pre.srcdoc='';htmlEditor.setValue('');jsEditor.setValue('');cssEditor.setValue('');}function update(){pre.srcdoc=htmlEditor.getValue()+"<script>"+jsEditor.getValue()+"<\/script><style>"+cssEditor.getValue()+"<\/style>";}function share(){update();window.open('http://tinyurl.com/create.php?url=data:text/html,'+encodeURIComponent(pre.srcdoc));}var params={theme:"vibrant-ink",extraKeys:{"Ctrl-Space":"autocomplete","Ctrl-Enter":update},lineNumbers:true,styleActiveLine:true,highlightSelectionMatches:true,autoCloseBrackets:true,matchBrackets:true,showTrailingSpace:true},htmlEditor=CodeMirror.fromTextArea(html,{mode:"text/html",autoCloseTags:true,matchTags:{bothTags:true}}.extend(params)),cssEditor=CodeMirror.fromTextArea(css,{mode:"text/css",gutters:["CodeMirror-lint-markers"],lint:true}.extend(params)),jsEditor=CodeMirror.fromTextArea(js,{mode:{name:"text/javascript",globalVars:true},gutters:["CodeMirror-lint-markers"],lint:true}.extend(params));</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment