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

index.js
1import { useState } from 'react'2import { highlight } from 'sugar-high'3import { Editor } from 'codice'45const defaultText = 'console.log("hello world")'67export default function Page() {8  const [code, setCode] = useState(defaultText)910  return (11    <div>12      <Editor13        value={code}14        className='editor'15        title='index.js'16        onChange={(text)=> setCode(text)}17      />18    </div>19  )20}

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()