Executable JavaScript code snippets, in your browser. Powered by Ace Editor.
Say you want to allow users to test out some JavaScript that you've written, and you have some simple HTML that looks like this:
<html>
<head>
<script src="lib/jsblock.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>
<link type="text/css" rel="stylesheet" href="lib/jsblock.css">
</head>
<body>
<pre id="code">
var message = "Hello World";
console.log(message);
</pre>
</body>
</html>Readers won't be able to test anything out that way. You want to enrich this experience, but how? One way is through the creation of a jsblock.
How to create a jsblock:
-
Include the JavaScript and CSS as well as Ace Editor in the web page.
-
Convert the code into a code snippet into a jsblock with the easy API. One example might be:
new jsblock(document.getElementById('code'))- Viola!
This was inspired by codeblock.js