QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Create an Frontend Editor with Code Highlighting and Execution

Create an Frontend Editor with Code Highlighting and Execution

code-editor

In this tutorial I will show you how to create a online code editor like Codepen, jsFiddle, repl.it etc.

After reading this tutorial you will be able to create such kind of awesome tools with just few lines of code. Let’s see a demo of what we will be creating in this tutorial.

View Demo

Let’s see how to create such kind of tools.

What are the basic components?

These tools are made up of two basic components: code editor and code interpreter/compiler. Let’s see how to create a code editor and how to execute the code.

Creating a Frontend Code Editor

There are basically three ways of creating a code editor:

  1. We can use a HTML textarea element as a editor. But the problem with textarea element we cannot style the text inside it therefore its not possible to support syntax highlighting.
  2. We can use WYSIWYG HTML5 API’s contenteditable attribute to convert a div into a editor. We can also highlight code. But the problem is it will not support in old browsers.
  3. The final solution is to create your own custom editor from scratch. Creating a editor from required a lot of work because you need to emulate cursor, handle lots of keyboard and mouse events and also have to deal with a lot of data structure and algorithms. Therefore we can use open source custom text editors like CodeMirror. If you would have build your own editor then it would have been something like CodeMirror.

With just few lines of code we finished building a front end HTML code editor using CodeMirror.

<!doctype html>
<html>
    <head>
        <title>Frontend Playground</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/codemirror/CodeMirror/master/lib/codemirror.css">
        <script type="text/javascript" src="https://cdn.rawgit.com/codemirror/CodeMirror/master/lib/codemirror.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/codemirror/CodeMirror/master/mode/xml/xml.js"></script>
    </head>
    <body>
        <textarea id="editor"></textarea>
    </body>
    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            lineNumbers: true,
            mode:  "xml"
        });
    </script>
</html>

Here we loaded XML highlighting mode library but if you need your code editor to highlight some other language then load appropriate mode library. For more information refer to CodeMirror docs.

Code Execution

If your editor is for front-end languages(HTML, CSS and JS) then you can execute the code inside an iframe. But if you code editor is for languages like C++, PHP, Java, Python etc then you can execute your code inside a Docker container and display the output on frontend.

Here I am creating a editor for frontend languages therefore I will execute code inside iFrame. here is the code to execute frontend code

<!doctype html>
<html>
    <head>
        <title>Frontend Playground</title>
        <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/codemirror/CodeMirror/master/lib/codemirror.css">
        <script type="text/javascript" src="https://cdn.rawgit.com/codemirror/CodeMirror/master/lib/codemirror.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/codemirror/CodeMirror/master/mode/xml/xml.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.rawgit.com/carlo/jquery-base64/master/jquery.base64.min.js"></script>
    </head>
    <body>
        <textarea id="editor"></textarea>
        <button onclick="submit_html();">Submit</button>
        <iframe id="result"></iframe>
    </body>
    <script>
        var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            lineNumbers: true,
            mode:  "xml"
        });

        function submit_html()
        {
            editor.save();
            var code = document.getElementById("editor").value;
            var data_url = "data:text/html;charset=utf-8;base64," + $.base64.encode(code);
            document.getElementById("result").src = data_url;
        }
    </script>
</html>

Here we encoding the user entered code into base64 and assigning it to the iFrame via data URI. Here we are using jQuery base64 encoding library to encode code into base64.

Now you must be amazed to see how we created a frontend code editor with just few lines of code.

Nov 18, 2014Narayan Prusty
Push Notifications in Intel XDK using pushMobiWorking with File System using Intel XDK
Comments: 13
  1. Duncan
    5 years ago

    I would be amazed if it actually worked, but nether the demo nor the code worked for me.

    ReplyCancel
    • Osama Abozahra
      5 years ago

      Just you have to update script and css links with these

      ReplyCancel
  2. qqdewa
    5 years ago

    Hi,
    How do i saved python code and keep it in server using form.submit() but preserve the format (indentation, etc) ??

    ReplyCancel
  3. gelo
    6 years ago

    i needed this . can i do this using visual studio? one thing i that i need when i click run it should run like notepad and browser do. pls do help me. thanks.

    ReplyCancel
  4. Marshall Unduemi
    6 years ago

    Thanks, what i was looking for just implemented it Link

    Nice one

    ReplyCancel
  5. Arslan
    6 years ago

    I am working for an online Editor , which can run node.js code … with batch console.
    can you give me any suggestion or help how to change this edior for node.js code, with TreeView and Ribbon Bar ???

    ReplyCancel
  6. Treavis
    6 years ago

    can you make it execute php code as well please?

    ReplyCancel
  7. john
    6 years ago

    the issue is that your demo works fine, but going by the tutorial noting happens when i click submit.

    ReplyCancel
    • john
      6 years ago

      Sorry i keep posting, so when i put the code into a textfile and make it an html, then run it through my browser nothing happens when i click submit. BUT when i run that code through another code editor then it works. i am very confused on why this is happening

      ReplyCancel
  8. john
    6 years ago

    the demo works but when i follow your tutorial it doesn’t seem to, the tutorial also seems to be missing quite a few elements that are present in the demo, i assume that’s why the demo works and the tutorial code snippet does not.

    ReplyCancel
  9. Nazim
    6 years ago

    Many Many Thanks…..

    ReplyCancel
  10. Sreenath
    7 years ago

    Really helped it. Thanks a lot simple and subtle

    ReplyCancel
  11. get online seo tools
    7 years ago

    WOW just what I was loloking for. Came here by searching foor seo tools osx

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 13 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What are the basic components?
  • Creating a Frontend Code Editor
  • Code Execution
Related Articles
  • Github Style Markdown Editor and Preview
  • Creating a WYSIWYG Editor
  • Changing CSS Style using JavaScript
  • Facebook Style Infinite Scroll
  • HTML5 Full Screen API Tutorial with Demo
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license