react-code-editor-editable

React code editor

Functionalities

• 191 languages highlighting with Highlight.js.
• 97 themes/styles.
• Scrollable.
• Tab support.
• Optional line numbers on editor.

Installation

npm i react-code-editor-editable or yarn add react-code-editor-editable

Usage

import React, { useState } from 'react'

import { CodeEditorEditable } from 'react-code-editor-editable'
import 'highlight.js/styles/dracula.css';

const App = () => {
  const [value, setValue] = useState('<div></div>')

  return (
    <div className='center'>
      <CodeEditorEditable
        value={value}
        setValue={setValue}
        width='50vw'
        height='50vh'
        language='html'
        inlineNumbers
      />
    </div>
  )
}

export default App

Props

Name	Type	Description	Required
value	string	String that contains the code written.	✔️
setValue	Dispatch<SetStateAction>	Function to that sets the the value field.	✔️
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.	❌

Styles

Style names

• a11y-dark
• a11y-light
• agate
• an-old-hope
• androidstudio
• arduino-light
• arta
• ascetic
• atelier-cave-dark
• atelier-cave-light
• atelier-dune-dark
• atelier-dune-light
• atelier-estuary-dark
• atelier-estuary-light
• atelier-forest-dark
• atelier-forest-light
• atelier-heath-dark
• atelier-heath-light
• atelier-lakeside-dark
• atelier-lakeside-light
• atelier-plateau-dark
• atelier-plateau-light
• atelier-savanna-dark
• atelier-savanna-light
• atelier-seaside-dark
• atelier-seaside-light
• atelier-sulphurpool-dark
• atelier-sulphurpool-light
• atom-one-dark-reasonable
• atom-one-dark
• atom-one-light
• brown-paper
• codepen-embed
• color-brewer
• darcula
• dark
• default
• docco
• dracula
• far
• foundation
• github-gist
• github
• gml
• googlecode
• gradient-dark
• gradient-light
• grayscale
• gruvbox-dark
• gruvbox-light
• hopscotch
• hybrid
• idea
• ir-black
• isbl-editor-dark
• isbl-editor-light
• kimbie.dark
• kimbie.light
• lightfair
• lioshi
• magula
• mono-blue
• monokai-sublime
• monokai
• night-owl
• nnfx-dark
• nnfx
• nord
• obsidian
• ocean
• paraiso-dark
• paraiso-light
• pojoaque
• purebasic
• qtcreator_dark
• qtcreator_light
• railscasts
• rainbow
• routeros
• school-book
• shades-of-purple
• solarized-dark
• solarized-light
• srcery
• stackoverflow-dark
• stackoverflow-light
• sunburst
• tomorrow-night-blue
• tomorrow-night-bright
• tomorrow-night-eighties
• tomorrow-night
• tomorrow
• vs
• vs2015
• xcode
• xt256
• zenburn