CODEWITHSUNDEEP
reactjssyntax-highlightingcson
hevele
hevele

Reputation: 943

React Editable Text Component with Custom Syntax Highlighting Support

Good evening all,

I need an editable textarea-like component for my React project that supports custom syntax highlighting, preferably with the CSON and CSS. I have been searching it for ages. I finally gave up and decided to ask here. Does anyone know any reliable library that can be used for this?

Any help would be greatly appreciated!

EDIT: As I delve deeper into the topic, I came to an understanding that this problem consists of several parts.

  1. [mostly done with this one] Create contenteditable div component with React. I used contentEditable component for React.
  2. Find a way to customize appearance of the div (as React fills div's innerHTML as String)
  3. Find a way to implement a parser that reads tags from a CSON and applies 2nd item for each of them.

Upvotes: 5

Views: 16808

Answers (2)

pblankley
pblankley

Reputation: 154

This is way after the fact but for anyone else stumbling on this, https://github.com/satya164/react-simple-code-editor is a good, easy option.

Upvotes: 7

Sean O'Reilly
Sean O'Reilly

Reputation: 31

I was able to use the npm package react-syntax-highlight to achieve this. Look that up and see if it helps!

Upvotes: 3

Related Questions