Codice

The Story of Code Presentation

Codice is a simple code editor and code block component for React. It is a zero-dependency library that provides a slim code editor and code block component.

npm install codice

<Editor />

indent

Screenshot

1import { useState } from 'react'2import { Editor } from 'codice'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    <div>12      <Editor13        value={code}14        className='editor'15        title={title}16        onChange={(text) => setCode(text)}17        onChangeTitle={(title) => setTitle(title)}18      />19    </div>20  )21}

<Code />

Ultimate Code Block

1import { Code } from 'codice'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    <Code 15      controls 16      title="app/index.js"17      lineNumbers18      highlightLines={[1, [14, 19]]}19    >20      {'<div>Hello World</div>'}21    </Code>22  </div>23)

Language Based Highlighting

Pass the title with the file extension to enable language based highlighting.

# Here is a simple functiondef hello():    print('Hello, world from Python!')    return 123 # return a numberhello()

Core Editor Variables

--codice-text-color - Editor text color (default: transparent)

--codice-background-color - Editor background color (default: transparent)

--codice-caret-color - Text cursor color (default: inherit)

--codice-font-family - Code font family (default: Consolas, Monaco, monospace)

--codice-font-size - Font size (default: inherit)

--codice-code-padding - Content padding (default: 1rem)

--codice-code-line-number-width - Line numbers column width (default: 2.5rem)

UI Controls Variables

--codice-control-color - Control dots and UI elements color

--codice-title-color - Title text color

--codice-code-line-number-color - Line numbers color

--codice-code-highlight-color - Highlighted lines background