Простой крошечный встраиваемый редактор кода для любого языка

построено поверх prism.js

без npm и node.js 🗑️

Всяко лучше, чем например higlihts.js с их .min весом 36kB. И это только для подсветки, мдыы...

Вес всех файлов после минификаций:

Суть

textarea с pre тегом поверх, который абсолютно точно дублирует и красит содержимое.

Функционал:

• Подсветка любого языка. Как поменять?
  • изменить ссылку в index.html (prism-sql.min.js)
  • поменять sql на ваш язык внутри scripts.min.js
• Поддержка Tab и Shift+Tab
• Поддержка 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"...)

---

так как sql модуль prism это не про postgresql, то создал свой модуль pgSQL.js с регулярками через chatgpt, ошибки вроде выправил, но не факт что всё 100% идеально.

---

js uglified via https://www.uglifyjs.net/

css minified via https://www.uglifycss.com/