@yozora/react-code-editor

Simple no-frills code editor with syntax highlighting, forked from react-simple-code-editor as it's seems not been updated for several months.

Install

• npm

  npm install --save @yozora/react-code-editor

• yarn

  yarn add @yozora/react-code-editor

Usage

• Basic:

  import React, { useState } from 'react'
  import CodeEditor from '@yozora/react-code-editor'
  
  function Wrapper() {
    const [code, setCode] = useState<string>('let a: number = 1 + 2;')
  
    return (
      <CodeEditor
        lang="typescript"
        code={ code }
        onChange={ setCode }
      />
    )
  }
  
  const wrapper = (<Wrapper />)

Props

Name	Type	Required	Default	Description
autoFocus	boolean	false	-	Set the editor focus in default
className	string	false	-	CSS class name for the container
code	string	true	-	Code content
darken	boolean	false	true	Dark mode (vcsDarkTheme / vscLightTheme)
lang	string	true	-	Code language
lineHeight	React.CSSProperties['height']	false	'1.8em'	line height
onChange	(content: string) => void	true	-	Triggered when code changed.
preClassName	string	false	-	CSS class name for the underlying pre
preStyle	React.CSSProperties	false	-	CSS style object for the underlying textarea
showLinenos	boolean	false	true	Display line numbers
style	React.CSSProperties	false	-	CSS style object for the container
textareaClassName	string	false	-	CSS class name for the underlying textarea
textareaStyle	React.CSSProperties	false	-	CSS style object for the underlying textarea
theme	IPrismTheme	false	See below	Highlight prism theme.

• className: The root element of this component will always bind with the CSS class 'yozora-code-editor'

• theme: Default theme depends on the value of darken.

CSS variables

Name	Default value
--yozora-colors-border-code	#d3d3d3
--yozora-colors-caret-code	#ed6c60
--yozora-fonts-family-code	Consolas, 'Source Code Pro', 'Roboto Mono', monospace, sans-serif
--yozora-fonts-size-code	1rem

Related

• @yozora/react-code-highlighter
• react-simple-code-editor