Editor & Code

npm install @sugar-high/react sugar-high

<Editor />

A controlled, highlighted editor with optional line numbers.

editor-example.tsx

1import { useState } from 'react'2import { Editor } from '@sugar-high/react'34const defaultText = 'console.log("hello world")'56export default function Page() {7  const [code, setCode] = useState(defaultText)8  const [title, setTitle] = useState('index.js')910  return (11    <Editor12      value={code}13      title={title}14      onChange={(text) => setCode(text)}15      onChangeTitle={(title) => setTitle(title)}16    />17  )18}
import { useState } from 'react'
import { Editor } from '@sugar-high/react'

const defaultText = 'console.log("hello world")'

export default function Page() {
  const [code, setCode] = useState(defaultText)
  const [title, setTitle] = useState('index.js')

  return (
    <Editor
      value={code}
      title={title}
      onChange={(text) => setCode(text)}
      onChangeTitle={(title) => setTitle(title)}
    />
  )
}

line numbers

18 lines · 422 characters

<Code />

Present code with optional line numbers and marked lines.

code-example.tsx

1import { Code } from '@sugar-high/react'2import { highlight } from 'sugar-high'34function renderMarkup() {5  const code = "return 'long live sugar-high'"6  return highlight(code)7}89const markup = renderMarkup()10console.log(markup)1112render(13  <div>14    <Code15      controls16      title="app/index.js"17      lineNumbers18      highlightLines={[1, [14, 19]]}19    >20      {'<div>Hello World</div>'}21    </Code>22  </div>23)

Styling

Compose frame variables with Sugar High token themes.

const style = {  backgroundColor: '#f6f8fa',  '--sh-editor-background-color': 'transparent',  '--sh-caret-color': '#24292f',  '--sh-title-color': '#57606a',  '--sh-control-color': '#afb8c1',  '--sh-line-number-color': '#8c959f',  '--sh-line-highlight-color': '#fff8c5',  '--sh-keyword': '#cf222e',  '--sh-string': '#0a3069',} as React.CSSProperties<Editor style={style} value={source} onChange={setSource} />

Variable	Scope / default	Purpose
`--sh-editor-text-color`	Editor `transparent`	Textarea text; transparent over highlighted code.
`--sh-editor-background-color`	Editor `transparent`	Textarea background.
`--sh-caret-color`	Both `inherit`	Editor and editable-title caret.
`--sh-font-family`	Both `Editor monospace; Code inherited`	Code, textarea, and title font.
`--sh-font-size`	Both `inherit`	Code and textarea font size.
`--sh-padding`	Both `1rem`	Content and header spacing.
`--sh-line-number-width`	Both `2.5rem / auto`	Line-number gutter width.
`--sh-control-color`	Both `unset`	Header control-dot color.
`--sh-title-color`	Both `unset`	Header filename color.
`--sh-line-number-color`	Both `unset`	Line-number color.
`--sh-line-highlight-color`	Both `unset`	Highlighted-line background.

Set these inline or on the component root. Use --sh-* variables for token colors; the theme guide lists copyable presets. Keep the editor textarea colors transparent to preserve its highlighted overlay.

API

Props at a glance. Both components also accept standard div attributes.

<Editor />

Prop	Type / default	Purpose
`value`	`string · ''`	Controlled source text.
`onChange`	`(code) => void`	Runs when the source changes.
`title`	`string \| null`	Editable filename and language hint.
`onChangeTitle`	`(title) => void`	Makes the title editable.
`lang`	`LanguageName`	Canonical language; overrides the title.
`extension`	`string`	Legacy language hint when no lang is set.
`controls`	`boolean · true`	Shows the header controls.
`lineNumbers`	`boolean · true`	Shows one-based line numbers.
`lineNumbersWidth`	`string`	Sets the line-number gutter width.
`cx`	`HighlightOptions['cx']`	Maps token types to classes.
`mark`	`HighlightOptions['mark']`	Mutates generated token properties.
`padding`	`string`	Sets editor content padding.
`fontSize`	`string \| number`	Sets the editor font size.
`fontFamily`	`string`	Sets the editor font family.
`textareaRef`	`Ref<HTMLTextAreaElement>`	Accesses the underlying textarea.
`ref`	`Ref<HTMLDivElement>`	Accesses the editor root.

<Code />

Prop	Type / default	Purpose
`children`	`string · required`	Source or generated markup to render.
`lang`	`LanguageName`	Canonical language; overrides the title.
`title`	`string`	Filename shown in the header and used as a language hint.
`extension`	`string`	Legacy language hint when no lang is set.
`controls`	`boolean · false`	Shows header controls.
`lineNumbers`	`boolean · false`	Shows one-based line numbers.
`highlightLines`	`(number \| [number, number])[]`	Highlights lines and inclusive ranges.
`cx`	`HighlightOptions['cx']`	Maps token types to classes.
`mark`	`HighlightOptions['mark']`	Mutates generated token properties.
`markLine`	`HighlightOptions['markLine']`	Mutates generated line properties.
`preformatted`	`boolean · true`	Uses a pre and code wrapper.
`asMarkup`	`boolean · false`	Treats children as highlighted HTML.
`lineNumbersWidth`	`string`	Sets the line-number gutter width.
`padding`	`string`	Sets code content padding.
`fontSize`	`string \| number`	Sets the code font size.

Read the full React API on GitHub ↗