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. Source Code ↗

npm install codice

Editor Example

title={}controls={●}lineNumbers={●}

fontSize={14}

padding={1}

lineNumbersWidth={2.5}

index.js

1import { useState } from 'react'2import { Editor } from 'codice'34const defaultText = 'console.log("hello world")'56export default function Page() {7  const [code, setCode] = useState(defaultText)89  return (10    <div>11      <Editor12        value={code}13        className='editor'14        title='index.js'15        onChange={(text) => setCode(text)}16      />17    </div>18  )19}

Code Block Examples

Ultimate Code Block

app/index.js

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.

main.py

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