Decodize

console.log

Simplest Full Fledged Code Editor Using Data:text/html

Javascript code Editor

In one of Paul Irish’s presentation “The Primitives of the HTML5 Foundation”. He showed creating a simplest code editor using data uri link. Inspired from it, I created a small full fledged JavaScript code editor [code highlight & line number] using Code mirror 2 & data uri.

Following is the code from the presentation. Paste the code in your browser’s adress bar and convert it into a simple code editor.

data:text/html,<pre contenteditable>

Following code create a full javascript code editor using Code mirror 2.

data:text/html,<link rel="stylesheet" type="text/css" href="https://raw.github.com/marijnh/CodeMirror/master/lib/codemirror.css">
<script src="https://raw.github.com/marijnh/CodeMirror/master/lib/codemirror.js"></script>
<script src="http://www.decodize.com/codemirror/mode/javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.decodize.com/codemirror/doc/docs.css">
<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
<h1>JavaScript code editor</h1>
<textarea id="code" name="code"></textarea>
<script>var editor = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true,matchBrackets: true});</script>

Copy & paste code in browser’s address bar and it magically changes your browser in to a javascript code editor with syntax highlight & line number.

Adding following code will change browser in to a CSS editor.

data:text/html,<link rel="stylesheet" type="text/css" href="https://raw.github.com/marijnh/CodeMirror/master/lib/codemirror.css">
<script src="https://raw.github.com/marijnh/CodeMirror/master/lib/codemirror.js"></script>
<script src="https://raw.github.com/marijnh/CodeMirror/master/mode/javascript/javascript.js"></script>
<link rel="stylesheet" type="text/css" href="https://raw.github.com/marijnh/CodeMirror/master/doc/docs.css">
<style type="text/css">.CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}</style>
<textarea id="code" name="code"></textarea><script>var editor = CodeMirror.fromTextArea(document.getElementById("code"), {lineNumbers: true,matchBrackets: true});</script>

Creating a bookmarklet let us access to code editor instantly. Drag and drop the following bookmarklet in to your bookmark region and click it to transform the browser into a javascript code editor.

JavaScript code editor

Since code mirror has so many supported modes: you can create code editors based on modes. Check out Code mirror 2.