New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

codice

Package Overview
Dependencies
Maintainers
0
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

codice

Codice is a slim React components suite for code editing and displaying story. It provides an editor component and a code block component with syntax highlighting.

  • 0.5.1
  • npm
  • Socket score

Version published
Weekly downloads
361
decreased by-40.92%
Maintainers
0
Weekly downloads
 
Created
Source

Codice

Codice is a slim React components suite for code editing and displaying story. It provides an editor component and a code block component with syntax highlighting.

Installation

npm install codice

Usage

Editor

import { Editor } from 'codice'

<Editor
  title="My Code Editor"
  value="const hello = 'world';"
  onChange={(code) => console.log(code)}
  highlight={(code) => code}
/>
Props

The following props are supported by the Editor component:

  • value (optional): A string representing the initial code value of the editor.
  • onChange (optional): A function called when the code in the editor changes. The function will receive the updated code as its argument.
  • title (optional): A string representing the title of the editor.
  • controls (optional): A boolean value indicating whether to display the controls for the editor.
  • lineNumbers (optional): A boolean value indicating whether to display line numbers in the editor.
  • highlight (optional): A function used to provide syntax highlighting for the code. It should accept the code as an argument and return the highlighted code as an HTML string. You can use any syntax highlighting library (e.g., Prism) to implement this functionality.

Additionally, you can pass any other props to the Editor component, which will be applied to the root div element.

Code Block

import { Code } from 'codice'

<Code controls title="app/index.js">
  {'<div>Hello World</div>'}
</Code>
Props
  • title (optional): A string representing the title of the code block.
  • controls (optional): A boolean value indicating whether to display the controls for the code block.
  • lineNumbers (optional): A boolean value indicating whether to display line numbers in the code block.
  • preformatted (optional): A boolean value indicating whether the code should be displayed as preformatted text. If true, the code will be displayed in a pre and a code element. If false, the code will be displayed in a div element.

Styling

CSS Variables

To customize the appearance of the editor, you can modify the CSS variables used in the styles object in the provided code:

  • --codice-editor-text-color: The color of the editor text.
  • --codice-editor-background-color: The background color of the editor.
  • --codice-editor-caret-color: The color of the caret in the editor.
  • --codice-editor-control-color: The color of the control items in the editor.

For example, you can set the following CSS in your application:

:root {
  --codice-editor-text-color: #333;
  --codice-editor-background-color: #f5f5f5;
  --codice-editor-caret-color: #d5efea;
}

This will style the editor with a light gray background, darker gray text, and even lighter gray controls.

CSS Attributes

You can also customize the appearance of the editor by overriding the CSS attributes of the code block:

  • [data-codice-editor-controls]: The class name for the controls in the editor.
  • [data-codice-editor-control]: The class name of control items, there're 3 of them.

Projects Powered by Codice

Codice serves as the backbone for a growing ecosystem of packages that rely on its code editing and presenting capabilities. These projects showcase the versatility and performance Codice brings to modern development workflows:

  • sugar-high: A fast and lightweight syntax highlighter, leveraging Codice for live editing integration on website.
  • remark-sugar-high: A Remark plugin for adding syntax-highlighted code blocks to Markdown content, powered by Codice for precise and visually appealing outputs.
  • devjar: A tool for bundling interactive React code sandbox, using Codice to running the editor experience on website..

These projects and many more are built on Codice, demonstrating its ability to adapt to a wide range of use cases, from syntax highlighting in Markdown to powering interactive coding experiences. Codice isn’t just a library—it’s a foundation for modern, code-first solutions.

License

Codice is released under the MIT License. For more details, see the LICENSE file included in this repository.

FAQs

Package last updated on 20 Jan 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc