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.
1. Install & import the code editor.
# NPM
$ npm i @uiw/react-textarea-code-editor --saveimport 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',
}}
/>
);
}
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