monza-editor 0.5.13 → 0.5.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +51 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
ADDED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
# 🏁 Monza Editor 🏎️
|
|
2
|
+
|
|
3
|
+
[](https://github.com/raviqqe/monza-editor/actions)
|
|
4
|
+
[](https://www.npmjs.com/package/monza-editor)
|
|
5
|
+
[](https://github.com/raviqqe/monza-editor/blob/main/LICENSE)
|
|
6
|
+
|
|
7
|
+
The `textarea` element with syntax highlight.
|
|
8
|
+
|
|
9
|
+
Its core library consists of only 1 KB JavaScript and 0.5 KB CSS!
|
|
10
|
+
|
|
11
|
+
## Install
|
|
12
|
+
|
|
13
|
+
```sh
|
|
14
|
+
# Preact
|
|
15
|
+
npm install @monza-editor/preact
|
|
16
|
+
|
|
17
|
+
# React
|
|
18
|
+
npm install @monza-editor/react
|
|
19
|
+
|
|
20
|
+
# Solid.js
|
|
21
|
+
npm install @monza-editor/solid
|
|
22
|
+
|
|
23
|
+
# Vanilla JS
|
|
24
|
+
npm install monza-editor
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
### Syntax highlighting
|
|
30
|
+
|
|
31
|
+
Instead of providing the default syntax highlighter, Monza Editor lets you bring your own one.
|
|
32
|
+
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.
|
|
33
|
+
See [examples](https://raviqqe.com/monza-editor/#examples) and their source code for more details.
|
|
34
|
+
|
|
35
|
+
### CSS styling
|
|
36
|
+
|
|
37
|
+
At the very minimum, we recommend you to set `font-size` and `font-family` to a certain monospace font at the top-level element.
|
|
38
|
+
You might set the other CSS properties, such as `line-height`, `background` and `border`, there.
|
|
39
|
+
|
|
40
|
+
You might also set the following CSS variables that overwrite their corresponding CSS properties.
|
|
41
|
+
|
|
42
|
+
- `--me-padding`: The padding inside a textarea.
|
|
43
|
+
|
|
44
|
+
## Alternatives
|
|
45
|
+
|
|
46
|
+
- [`webcoder49/code-input`](https://github.com/webcoder49/code-input) is a richer but still lightweight alternative.
|
|
47
|
+
- [`microsoft/monaco-editor`](https://github.com/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.
|
|
48
|
+
|
|
49
|
+
## License
|
|
50
|
+
|
|
51
|
+
[MIT](https://github.com/raviqqe/monza-editor/blob/main/LICENSE)
|