CodeEditor

Edits code with syntax highlighting for multiple programming languages.

import { CodeEditor } from '@lobehub/ui';

NPM Source Edit

Data Entry

CodeEditor is a component for editing code with syntax highlighting support for various programming languages.

Default

Loading preview

APIs

CodeEditor properties

classNames

{ highlight?: string; textarea?: string; }

defaultValue

string

Defaults to "".

flexIFlexbox

string | number

flex 值

Defaults to "0 1 auto".

heightIFlexbox

string | number

高度

Defaults to "auto".

languageRequired

string

Defaults to "markdown".

onValueChangeRequired

(value: string) => void

placeholder

string

Defaults to "".

ref

null | (instance: HTMLTextAreaElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLTextAreaElement | null>

style

CSSProperties

styles

{ highlight?: CSSProperties; textarea?: CSSProperties; }

valueRequired

string

variant

'filled' | 'outlined' | 'borderless'

Defaults to "borderless".

widthIFlexbox

string | number

宽度

Defaults to "auto".

Also accepts all native HTML and ARIA attributes.

CodeEditor also inherits some properties from TextArea and Flexbox components