@yozora/react-code-editor NPM

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`