jQuery CodeMirror Plugin Sample

jQuery + CodeMirror 2

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/lib/util/runmode.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://raw.github.com/lyhcode/jquery-codemirror/master/jquery.codemirror.js"></script>
<h3>syntax highlight editor</h3>
<textarea class="editor" id="code">var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(1337, "127.0.0.1");
console.log('Server running at http://127.0.0.1:1337/');</textarea>

<h3>highlight only (runmode)</h3>
<textarea class="highlight">var net = require('net');
 
var server = net.createServer(function (socket) {
  socket.write("Echo server\r\n");
  socket.pipe(socket);
});
 
server.listen(1337, "127.0.0.1");</textarea>

JavaScript

$(function() {
  $('.highlight').codemirror({
    mode: 'html',
    runmode: true
  });
  var editor1 = $('.editor').codemirror({
    mode: 'html',
    lineNumbers: true
  });
});