Textarea Code Editor With Syntax Highlighting

A simple textarea-based code editor with syntax highlighting. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.

How to use it:

1. Install & import the code editor.

# NPM
$ npm i @uiw/react-textarea-code-editor --save

import CodeEditor from '@uiw/react-textarea-code-editor';

2. Render a new code editor in the app and determine the language.

function App() {
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <CodeEditor
      value={code}
      language="js"
      placeholder="Placeholder Text"
      onChange={(evn) => setCode(evn.target.value)}
      padding={15}
      style={{
        fontSize: 14,
        backgroundColor: "#fafafa",
        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
      }}
    />
  );
}

Preview:

Download Details:

Author: uiwjs

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/uiwjs/react-textarea-code-editor

License: MIT