CodeMirror code editor

by Emanuele del Grande

HTML

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/mode/javascript/javascript.min.js"></script>

<div class="logo">
    <span>JS</span> <span>Code Editor</span>
    <div>Configuring CodeMirror editor</div>
</div>

<p>
CodeMirror editor configured to parse JavaScript code.</p>

<div class="editor-box">
<textarea id="editor">
document.find.setAlias('$');

var DragManager = new Class(function(_) {
	// private members:
	var _$elem,
        _pointer;
	
	this.init = function(selector) {
		_$elem = $(selector);
		_pointer = { x: 0, y: 0 };
		
		// attach the drag when the handle is hooked:
		_$elem.on('mousedown', _startDrag);
		
		// detach the dragging when mouse is released:
		document.on('mouseup', _stopDrag);
	};
	
	function _startDrag(e) {
    	// fixed, relative and absolute positioning need no fix:
		if (_$elem.css('position') === 'static') {
			_$elem.css('position', 'relative');
        }
		_pointer = { x: e.clientX, y: e.clientY };
		document.on('mousemove', _drag);
	};
	
	function _drag(e) {
		e.preventDefault();
		
		var shift = { x: e.clientX - _pointer.x, y: e.clientY - _pointer.y };
		var target = {
			left: parseInt(_$elem.css('left'), 10) + shift.x,
			top: parseInt(_$elem.css('top'), 10) + shift.y
        };
		
		// move the element to the target position:
		_$elem.css({ left: target.left + 'px', top: target.top + 'px' });
		
		// update the last pointer position:
		_pointer = { x: e.clientX, y: e.clientY };
	};
	
	function _stopDrag(e) {
		document.off('mousemove', _drag);
	};
});

var dragManager = new DragManager('#handle');

/****************************
*
* Wanting to put it in ECMAScript 6, it would look like this:
*
*****************************/

class...

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }

/* SPECIFIC STYLE */
.editor-box { margin: 20px 0; border: 1px solid #ccc; }

JavaScript

var $editor = document.getElementById("editor");
var editor = CodeMirror.fromTextArea($editor, {
    lineNumbers: true,
    mode: "javascript",
    indent: 4
});

var code = editor.getValue();