Skip to content

CodeEditor in React with Textarea & Prism React Renderer for highlighting JSX, simplifying code editing and viewing in web apps.

Notifications You must be signed in to change notification settings

NileshDeshmukh09/Code-Editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Demo

TealFeed Code Editor Screenshot.

Features

  • Created CodeEditor using Textarea & Prism-react-renderer Library for syntax Hightlighting
  • Wrote Test Cases to cover the scenario
  • Proper naming conventions for the components & folder Structure

Getting Started ( CODE EDITOR )

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

Make sure you have Node.js and npm installed. You can download them from Node.js.

Installing

  1. Clone the repository

    git clone https://github.com/NileshDeshmukh09/Code-Editor.git
    
  2. Navigate to the project directory

    cd Code-Editor
    
  3. Install dependencies

    npm install
    
  4. Start the development server

    npm start
    
  5. Testing This project uses @testing-library/react for testing. To run tests:

    npm test
    

Tests Covered

Rendering

  • Verifies if the main App component renders correctly.

CodeEditor Component

  • Updates sourceCode state when typing
  • Prevents text selection within the editor
  • Applies syntax highlighting and validates highlighted tokens

Thankyou

About

CodeEditor in React with Textarea & Prism React Renderer for highlighting JSX, simplifying code editing and viewing in web apps.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published