DEV Community

manu
manu

Posted on • Edited on

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'>
Enter fullscreen mode Exit fullscreen mode

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; }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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(); }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Hope you found this useful!

Top comments (0)