https://github.com/mehekfatima/devtool-studio

Code editor and markdown maker
https://github.com/mehekfatima/devtool-studio

codeeditor frontend markdown-editor project responsive-design webdevelopment

Last synced: about 1 month ago
JSON representation

Code editor and markdown maker

• Host: GitHub
• URL: https://github.com/mehekfatima/devtool-studio
• Owner: MehekFatima
• License: mit
• Created: 2024-04-21T21:34:22.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-22T05:47:18.000Z (10 months ago)
• Last Synced: 2024-11-19T15:55:22.628Z (3 months ago)
• Topics: codeeditor, frontend, markdown-editor, project, responsive-design, webdevelopment
• Language: CSS
• Homepage: https://devtool-studio.netlify.app/
• Size: 10.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Code Editor and Markdown Maker

This website aims to provide a sleek Markdown editor with live preview and the ability to download your Markdown content. Additionally, it offer an HTML, CSS, and JavaScript code editor with a limited console functionality.

## Features

### Markdown Editor

- **Live Preview**: See your Markdown content rendered in real-time.

- **Download Markdown**: Easily download your Markdown file.

- **Copy Markdown**: Quickly copy your Markdown content.

### Code Editor

- **HTML, CSS, JS**: Edit HTML, CSS, and JavaScript code.

- **Run Code**: Execute your code in real-time.

- **Download Code**: Download your HTML, CSS, JS files separately.

### Console (Limited Functionality)

- **JavaScript Console**: Execute JavaScript code with limited functionalities.

## Website Screenshots

### Home

![Home Page](https://github.com/MehekFatima/devtool-studio/blob/main/screenshots/Home.gif)

### Markdown Editor

![Markdown Editor](screenshots/markdown_editor.png)

### Code Editor 

![Code Editor](https://github.com/MehekFatima/devtool-studio/blob/main/screenshots/code_editor.gif)

### Console

![Console](screenshots/console.png)

## Website Link

Check out the live website: [Code Editor and Markdown Maker](https://devtool-studio.netlify.app/)

## Usage

1. **Markdown Editor**

   - Enter your Markdown content in the left pane.

   - Preview the rendered Markdown on the right.

   - Click the download icon to save your Markdown file.

   - responsive design 

2. **Code Editor**

   - Write HTML, CSS, and JavaScript code in their respective sections.

   - See your code output in the preview window.

   - Download each code file separately using the download icons.

   - responsive design 

3. **Console**

   - The console is limited in functionality.

   - Enter JavaScript code in the console input and press Enter to execute.

   - View results and debug code with console logs.

   - responsive design 

## Technologies Used

- HTML

- CSS

- JavaScript

- [Marked.js](https://marked.js.org/) for Markdown rendering