JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/addon/edit/continuecomment.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="http://codemirror.net/doc/docs.css">
<form>
    <textarea id="code" name="code">//from http://coding.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/
        
(function(){

	// the minimum version of jQuery we want
	var v = "1.8";

	// check prior inclusion and version
	if (window.jQuery === undefined || window.jQuery.fn.jquery < v) {
		var done = false;
		var script = document.createElement("script");
		script.src = "//ajax.googleapis.com/ajax/libs/jquery/" + v + "/jquery.min.js";
		script.onload = script.onreadystatechange = function(){
			if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete")) {
				done = true;
				initMyBookmarklet();
			}
		};
		document.getElementsByTagName("head")[0].appendChild(script);
	} else {
		initMyBookmarklet();
	}
	
	function initMyBookmarklet() {
		(window.myBookmarklet = function() {
			// your JavaScript code goes here!
		})();
	}

})();
        
    </textarea>
</form>

<a id="bookmarklet" href="">
    drag into your bookmark-toolbar
</a>

CSS

.CodeMirror {
    border: 1px solid #eee;
    height: auto;
}
.CodeMirror-scroll {
    overflow-y: hidden;
    overflow-x: auto;
}

a#bookmarklet{
    margin-top: 20px;
    width: auto;
    display: inline-block;
    text-align:center;
    padding: 10px;
    -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
    border: 2px solid #800004;
    background: transparent;
    color:#800004;
    text-transform: uppercase;
}

JavaScript

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    matchBrackets: true,
    extraKeys: {
        "Enter": "newlineAndIndentContinueComment"
    }
});

$('a#bookmarklet').on('mousedown', function () {
    editor.save();    
    var value = encodeURI($('textarea#code').val());
    $('a#bookmarklet').attr('href', "javascript:" + value)
});