Code editor
npm install react-code-editor-editable- 191 languages highlighting with Highlight.js.
- 97 themes/styles.
- Scrollable.
- Tab support.
- Optional line numbers on editor.
npm i react-code-editor-editable
oryarn add react-code-editor-editable
JSX
import React, { useState } from 'react'import { CodeEditorEditable } from 'react-code-editor-editable'
import 'highlight.js/styles/dracula.css';
const App = () => {
const [value, setValue] = useState('
') return (
setValue={setValue}
width='50vw'
height='50vh'
language='html'
inlineNumbers
/>
)
}export default App
``| Name | Type | Description | Required |
| ------------- | ---------------------------------- | --------------------------------------------------------------------------------------- | -------- |
| value | _string_ | String that contains the code written. | ✔️ |
| setValue | _Dispatch
| width | _string_ | Code editor width. | ❌ |
| height | _string_ | Code editor height. | ❌ |
| padding | _string_ | Code editor padding. | ❌ |
| borderRadius | _string_ | Code editor border radius. | ❌ |
| language | _string_ | See here highlight.js all languages supported . | ✔️ |
| inlineNumbers | _boolean_ | Shows line numbers. | ❌ |
| caretColor | _string_ | Changes the caret color. | ❌ |
| tabSize | _number_ | Number of spaces added when Tab is pressed. | ❌ |