Source Code ↗
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 />
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}22<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)24Language 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
| Variable | Description |
|---|---|
--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
| Variable | Description |
|---|---|
--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 |