Simple no-frills code editor with syntax highlighting, forked from react-simple-code-editor as it's seems not been updated for several months.
-
npm
npm install --save @yozora/react-code-editor
-
yarn
yarn add @yozora/react-code-editor
-
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 />)
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 ofdarken
.
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 |