🏁 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

Astro

• Source code

Preact

• Source code

React

• Source code

Solid.js

• Source code

Vanilla JS

• Source code