🏁 Monza Editor 🏎️

The textarea element with syntax highlight.

Its core library consists of only 1 KB JavaScript and 0.5 KB CSS!

Install

# For Preact
npm install @monza-editor/preact

# For React
npm install @monza-editor/react

# For Solid.js
npm install @monza-editor/solid

# For vanilla JS
npm install monza-editor

Usage

Syntax highlighting

Instead of providing the default syntax highlighter, Monza Editor lets you bring one of your own. You need to pass a highlight function which takes source code as a string and returns HTML-annotated code as a string on the initialization of Monza Editor. See examples and their source code for more details.

CSS styling

At the very minimum, we recommend you to set font-size and font-family to a certain monospace font at the top-level element. You might set the other CSS properties, such as line-height, background and border, there.

You might also set the following CSS variables that overwrite their corresponding CSS properties.

• --me-padding: The padding inside a textarea.

Alternatives

• webcoder49/code-input is a richer but still lightweight alternative.
• microsoft/monaco-editor is the full-fledged editor in JS, which you can always fall back to with the burden of its huge bundle size.

License

MIT

Examples

All the examples below except for Astro use Picolight for syntax highlighting.

Astro

• Source code

Preact

• Source code

React

• Source code

Solid.js

• Source code

Vanilla JS

• Source code