costingh/code-editor

Simple code editor in browser. It consist in 3 panels for Html, CSS, JavaScript, where a user can write code, and another panel where the output is shown. All the code can be transposed into a html file, which can be downloaded by user.

code-editor

Description

This app is a live code editor in browser, that allows a user to write HTML, CSS and Javascript in three different panels, and to see the output into another. After the user has finished writing code, it can be downloaded as a html file that can be opened in browser. Every panel (for HTML, CSS, Javascript) has its own settings, like theme, font-size, auto close tags, tab dimension and many more. The user can also change the grid view, or resize every tab he desires.

In the image below, the output is computing the code live, but to run the script, a user has to click on the "Run" button.

This image displays all the available settings:

This is a demo on how the autoformat feature works.

Installing

• Run this commang: git clone https://github.com/costingh/code-editor.git
• After the operation is finished, navigate inside the code-editor folder, and open the index.html file in a browser.

Tech stack

This is an application written using HTML, CSS, Javascript, jQuery adn CodeMirror library to interpret the code.