https://github.com/smir-ant/simplewebcodeeditor
hightlight any lang + comments + undo/redo + tab
https://github.com/smir-ant/simplewebcodeeditor
comments embed highlight js little pgsql prism simple sql tab tiny undo-redo vanila
Last synced: 25 days ago
JSON representation
hightlight any lang + comments + undo/redo + tab
- Host: GitHub
- URL: https://github.com/smir-ant/simplewebcodeeditor
- Owner: smir-ant
- Created: 2024-09-25T13:36:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-02T03:15:25.000Z (12 months ago)
- Last Synced: 2025-07-02T03:34:33.508Z (12 months ago)
- Topics: comments, embed, highlight, js, little, pgsql, prism, simple, sql, tab, tiny, undo-redo, vanila
- Language: JavaScript
- Homepage: https://smir-ant.github.io/simpleWebCodeEditor/
- Size: 105 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple tiny embedded code editor for any lang
###### построено поверх prism.js | без npm и node.js 🗑️
![]()
Всяко лучше, чем например higlihts.js с их .min весом 36kB. И это только для подсветки, мдыы...
Вес всех файлов после минификаций:
Ну или применить сжатие, например brotli, то и того меньше, 5.7kB:
![]()
### Суть
`textarea` с `pre` тегом поверх, который абсолютно точно дублирует и красит содержимое.
### Функционал:
- Tab и Shift + Tab – Поддержка табуляции
- Ctrl + / – Поддержка комментирования через hotkey
- Ctrl + Z и Shift + Ctrl + Z – Поддержка undo/redo. Хоть и за счёт использования execCommand, который считается deprecated. Однако аналогов пока нет (подробнее). А свою микросистему с памятью через самодельный стек сомнительно внедрять...
- Поддержка resize (убери resize:none из css)
- Богатая система классификации:
| Класс | Что это | Пример(sql) |
|------------------|---------------------|-------------|
| `.comment` | Комментарии | --abc |
| `.string` | Строки | "abc" |
| `.keyword` | Ключевые слова | SELECT |
| `.punctuation` | Пунктуация | ; |
| `.number` | Числа | 123 |
| `.operator` | Оператор | BETWEEN |
| `.boolean` | Булевое значение | FALSE |
| `.function` | Функции | COUNT( |
❗️ Но есть и множество других классов, например
```css
.url, .property, .selector, .rule {/* в css, например */}
.class-name, .regex {/* js. у regex кста есть и вложенные классы :) */}
.attr-value, .attr-name {/* svg */}
```
> [!IMPORTANT]
> js подключается как clike+js
> ```html
>
>
> ```
>
> об этом можно легко понять глянув на первые символы `prism-javascript.min.js`:
> ```text
> Prism.languages.javascript=Prism.languages.extend("clike"...)
> ```
### Подсветка любого языка. Как поменять:
- изменить ссылку в index.html (prism-sql.min.js)
- поменять sql на ваш язык внутри scripts.min.js
---
так как sql модуль prism это не про postgresql, то создал свой модуль `pgSQL.js` с регулярками через chatgpt, ошибки вроде выправил, но не факт что всё 100% идеально.
---
###### js uglified via https://www.uglifyjs.net/
###### css minified via https://www.uglifycss.com/