🏁 Monza Editor 🏎️

The textarea element with syntax highlight.

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

Install

# Preact
npm install @monza-editor/preact

# React
npm install @monza-editor/react

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

# Vanilla JS
npm install monza-editor

Usage

Syntax highlighting

Instead of providing the default syntax highlighter, Monza Editor lets you bring your own one. 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