@sugar-high/react

Code editor & block

Edit and present highlighted code with two lightweight React components.

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}

line numbers18 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)