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