построено поверх 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( |
❗️ Но есть и множество других классов, например
.url, .property, .selector, .rule {/* в css, например */}
.class-name, .regex {/* js. у regex кста есть и вложенные классы :) */}
.attr-value, .attr-name {/* svg */}Important
js подключается как clike+js
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-clike.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-javascript.min.js"></script>об этом можно легко понять глянув на первые символы prism-javascript.min.js:
Prism.languages.javascript=Prism.languages.extend("clike"...)
- изменить ссылку в index.html (prism-sql.min.js)
- поменять sql на ваш язык внутри scripts.min.js
так как sql модуль prism это не про postgresql, то создал свой модуль pgSQL.js с регулярками через chatgpt, ошибки вроде выправил, но не факт что всё 100% идеально.