JSFiddle - React, Tailwind, and code Playground

by eigenjoy

HTML

<!DOCTYPE html>
<html class='no-js' lang='en'>
  <head>
    <title>Choc - Traceable Programming</title>
    <link href='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/components/codemirror/lib/codemirror.css' rel='stylesheet'>
    <link href='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/components/jquery-ui/themes/ui-lightness/jquery-ui.min.css' rel='stylesheet'>
    <link href='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/styles/choc.css' rel='stylesheet'>
    <link href='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/styles/choc-editor.css' rel='stylesheet'>
    <script src='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/components/jquery/jquery.min.js'></script>
    <script src='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/components/codemirror/lib/codemirror.js'></script>
    <script src='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/components/codemirror/mode/javascript/javascript.js'></script>
    <script src='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/components/codemirror-interactive-numbers/dist/codemirror-interactive-numbers.browser.js'></script>
    <script src='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/scripts/vendor/jquery-ui-1.10.3.custom.js'></script>
    <script src='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/scripts/vendor/two.js'></script>
    <script src='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/components/choc/dist/choc.browser.js'></script>
    <script src='http://j0dcwqka8t4jju2.private.choc.s3-website-us-east-1.amazonaws.com/scripts/choc/two-annotations.js'></script>
  </head>
  <body>
  
    <div class='choc-wrapper'>
      <div class='canvas-container'>
        <div id='parabola-canvas'></div>
      </div>
      <div class='canvas-editor'...

CSS

.choc-wrapper {
  padding: 2em;
}

JavaScript

(function() {
  $(document).ready(function() {
    var canvas, choc, editor, pad, parabola;
    choc = window.choc;
    
    // the code to prepopulate the editor with
    parabola = "var shift = 0;\n\
while (shift <= 200) {\n\
  pad.makeLine(shift, 0, 200, shift);\n\
  shift += 14;\n\
}";
    
    // initialize our Two.js pad
    pad = new Two({
      width: 200,
      height: 200,
      type: Two.Types.canvas
    }).appendTo(document.getElementById('parabola-canvas'));
    
    // enable retina on the canvas
    if (window.devicePixelRatio === 2) {
      canvas = pad.renderer.domElement;
      canvas.setAttribute('width', canvas.width * 2);
      canvas.setAttribute('height', canvas.height * 2);
      pad.renderer.ctx.scale(2, 2);
    }
    
    // create our choc editor
    editor = new choc.Editor({
      $: $,                            // give choc a reference to our jQuery
      id: "#choc-editor-for-parabola", // editor element id
      code: parabola,                  // the default code
      beforeScrub: function() {        // called before each scrub
        return pad.clear();
      },
      afterScrub: function() {         // called after each scrub
        return pad.update();
      },
      locals: {                        // locals to expose to the code
        pad: pad                       // expose `pad` as `pad`
      }
    });
    
    editor.start();
    return window.parabolaEditor = editor;
  });

}).call(this);