How to make a simple code editor using codemirror!

Hi,
In this mini-tutorial, I'll tell you how to make a HTML code editor using codemirror.
Check out a demo here: https://webcode.rf.gd/beta
Check out an online mini jsfiddle I made here!
(Click on the start coding now button) https://webcode.rf.gd

Step 1 - Install codemirror / use CDN
I prefer to use the CDN usually

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.css'>

Step 2 - Basic styling*
Good CSS --> Good website

*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* ----------
WRAPPERS & CONTAINERS
---------- */
section {
position: relative;
padding: 2.5rem 0;
}
.container {
position: relative;
margin: auto;
padding: 0 20px;
width: 100%;
max-width: 970px;
}
section:after, .container:after, .row:after {
display: table;
content: '';
clear: both;
}
/* ----------
CODE BLOCK
---------- */
.code-container {
position: relative;
margin-bottom: 1.5rem;
overflow: hidden;
border-radius: 3px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
}
.code-container:last-child {
margin-bottom: 0;
}

.btn {
background-color: #ed9d0a;
color: #fff;
padding: 4px 10px;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 8px 6px -6px rgba(0, 0, 0, .15);
-webkit-backface-visibility: hidden;
-webkit-transition: 200ms -webkit-transform ease, 200ms transform ease, 200ms box-shadow ease;
transition: 200ms -webkit-transform ease, 200ms transform ease, 200ms box-shadow ease;
}
.btn:hover {
box-shadow: 0 6px 6px -4px rgba(0, 0, 0, .2);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.btn.btn-left {
float: left;
}
.btn.btn-right {
float: right;
}
.row {
margin-bottom: 1.5rem;
width: 100%;
}
.row:last-child {
margin-bottom: 0;
}

Step 3 - Creating the elements
Basically, you'll need a textarea with an ID.
Note that you can use HTML in the textarea.
An iframe will be used to gather results.

<section>
<div class="container">
<div class="code-container">
<textarea id="code"><!-- xml/html syntax -->
<!DOCTYPE html>
<html>
<head>
<!-- meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- title -->
<title>Example website</title>

<!-- css -->
<style type="text/css">
/* css syntax */
body {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px #eee;
    padding: 20px;
    background: #fff
}
html {
    background: #fafafa
}
</style>

</head>
<body>
<section>
<div class="container">
<h1>Example website</h1>
<p>This is just a HTML example</p>
</div>
</section>
</body>
</html>
</textarea>
</div>
<iframe id="code_result" width="100%" height="500px" style="border: 5px solid gray">
</iframe>
<button onclick="run()">Run code!</button>
</div>
</section>

Step 4 - Javascript
Basically, this is the main part of this entire thing...
As per the documentation, you'll need to use getValue() instead of document.getElementById("...").value()

<script id="rendered-js" >
var doc = document.getElementById('code_result').contentWindow.document;
var html_value;
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    styleActiveLine: true,
    lineNumbers: true,
    matchBrackets: true,
    autoCloseBrackets: true,
    autoCloseTags: true,
    mode: "htmlmixed",
});
</script>

Running the code:
This is the code which will be used to run the code in the iframe:

function run() {
    html_value = editor.getValue();
    doc.open();
    doc.write(html_value);
    doc.close();
}

Final code:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.css'>
<style>
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* ----------
WRAPPERS & CONTAINERS
---------- */
section {
position: relative;
padding: 2.5rem 0;
}
.container {
position: relative;
margin: auto;
padding: 0 20px;
width: 100%;
max-width: 970px;
}
section:after, .container:after, .row:after {
display: table;
content: '';
clear: both;
}
/* ----------
CODE BLOCK
---------- */
.code-container {
position: relative;
margin-bottom: 1.5rem;
overflow: hidden;
border-radius: 3px;
box-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
}
.code-container:last-child {
margin-bottom: 0;
}

.btn {
background-color: #ed9d0a;
color: #fff;
padding: 4px 10px;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 8px 6px -6px rgba(0, 0, 0, .15);
-webkit-backface-visibility: hidden;
-webkit-transition: 200ms -webkit-transform ease, 200ms transform ease, 200ms box-shadow ease;
transition: 200ms -webkit-transform ease, 200ms transform ease, 200ms box-shadow ease;
}
.btn:hover {
box-shadow: 0 6px 6px -4px rgba(0, 0, 0, .2);
-webkit-transform: translateY(-2px);
transform: translateY(-2px);
}
.btn.btn-left {
float: left;
}
.btn.btn-right {
float: right;
}
.row {
margin-bottom: 1.5rem;
width: 100%;
}
.row:last-child {
margin-bottom: 0;
}
</style>
</head>
<body translate="no" >
<section>
<div class="container">
<div class="code-container">
<textarea id="code"><!-- xml/html syntax -->
<!DOCTYPE html>
<html>
<head>
<!-- meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- title -->
<title>Example website</title>

<!-- css -->
<style type="text/css">
/* css syntax */
body {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px #eee;
    padding: 20px;
    background: #fff
}
html {
    background: #fafafa
}
</style>

</head>
<body>
<section>
<div class="container">
<h1>Example website</h1>
<p>This is just a HTML example</p>
</div>
</section>
</body>
</html>
</textarea>
</div>
<iframe id="code_result" width="100%" height="500px" style="border: 5px solid gray">
</iframe>
<button onclick="run()">Run code!</button>

</div>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/xml/xml.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/css/css.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/javascript/javascript.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/htmlmixed/htmlmixed.js'></script>
<script id="rendered-js" >
var doc = document.getElementById('code_result').contentWindow.document;
var html_value;
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    styleActiveLine: true,
    lineNumbers: true,
    matchBrackets: true,
    autoCloseBrackets: true,
    autoCloseTags: true,
    mode: "htmlmixed",
});
function run() {
    html_value = editor.getValue();
    doc.open();
    doc.write(html_value);
    doc.close();
}
</script>
</body>

</html>

Demo: https://webcode.rf.gd/beta/

Hope you found this useful!

Blog

How to make a simple code editor using codemirror!

manu

Join Our Newsletter. No Spam, Only the good stuff.

Related