There are many awesome full-features code editors like CodeMirror, Ace, and Monaco. But if you want to edit small code snippets you probably want to use tiny editor and keep your bundle size small. Also, you can create your own!
- Create a class
Editor. The constructor take CSS selector and options: initial value and highlighter function.
- Listen to
- Add HTML to
preelement with external highlighter when
We will be interacting with
textarea element but see only highlighted HTML in
textarea text will be hidden by CSS rule -webkit-text-fill-color: transparent.
You can check all code in sandbox
If you don't need features like code folding, multi cursors, etc., you can create your code editor to keep your bundle size small.
If you need tiny editor with only features you want, like line numbers, handling tab for indentation, cut line, etc. you can check
It's lightweight ~1KB code editor, with ability to add your plugins. It also uses