https://github.com/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.
https://github.com/costingh/code-editor

Last synced: about 1 month ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/costingh/code-editor
• Owner: costingh
• Created: 2021-03-19T07:17:09.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-03-19T07:33:07.000Z (almost 4 years ago)
• Last Synced: 2023-09-27T07:59:19.214Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 7.96 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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.

![Demo1](https://github.com/costingh/code-editor/blob/master/demo-1.png?raw=true)

## This image displays all the available settings:

![Demo2](https://github.com/costingh/code-editor/blob/master/demo-2.png?raw=true)

## This is a demo on how the autoformat feature works.

![autoformat](https://github.com/costingh/code-editor/blob/master/autoformat-demo.gif?raw=true)

## 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.