Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
### Markdown Editor
### Code Editor
### Console
## 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 design2. **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 design3. **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