codemirror-blocks example

An example of using the codemirror-blocks library.

HTML

<script src="https://bootstrapworld.github.io/codemirror-blocks/dist/CodeMirrorBlocks-all.js"></script>
<textarea id="code" style="height:200px">
(+ (* 7 2) (- 5 7))
</textarea>
<button id="toggle" class="btn btn-default pull-right">
Toggle Block Mode
</button>

CSS

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css";
@import "https://codemirror.net/lib/codemirror.css";
@import "https://bootstrapworld.github.io/codemirror-blocks/dist/example.css";

.CodeMirror {
  height: 200px;
  border: 1px solid #eee;
  margin: 10px;
}
button {
  margin: 10px;
}

JavaScript

var code = document.getElementById('code');
var blocks = CodeMirrorBlocks.fromTextArea(code, 'wescheme');
blocks.setBlockMode(true)
$('#toggle').click(function() { blocks.toggleBlockMode(); });