{"id":29267654,"url":"https://github.com/smir-ant/simplewebcodeeditor","last_synced_at":"2026-05-19T03:37:24.684Z","repository":{"id":302372694,"uuid":"862962295","full_name":"smir-ant/simpleWebCodeEditor","owner":"smir-ant","description":"hightlight any lang + comments + undo/redo + tab","archived":false,"fork":false,"pushed_at":"2025-07-02T03:15:25.000Z","size":108,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-02T03:34:33.508Z","etag":null,"topics":["comments","embed","highlight","js","little","pgsql","prism","simple","sql","tab","tiny","undo-redo","vanila"],"latest_commit_sha":null,"homepage":"https://smir-ant.github.io/simpleWebCodeEditor/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/smir-ant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-25T13:36:24.000Z","updated_at":"2025-07-02T03:15:28.000Z","dependencies_parsed_at":"2025-07-02T03:34:37.327Z","dependency_job_id":"b3715942-e0b3-4308-be22-294a0a0b957d","html_url":"https://github.com/smir-ant/simpleWebCodeEditor","commit_stats":null,"previous_names":["smir-ant/simplewebcodeeditor"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/smir-ant/simpleWebCodeEditor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smir-ant%2FsimpleWebCodeEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smir-ant%2FsimpleWebCodeEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smir-ant%2FsimpleWebCodeEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smir-ant%2FsimpleWebCodeEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/smir-ant","download_url":"https://codeload.github.com/smir-ant/simpleWebCodeEditor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/smir-ant%2FsimpleWebCodeEditor/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263594623,"owners_count":23485877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["comments","embed","highlight","js","little","pgsql","prism","simple","sql","tab","tiny","undo-redo","vanila"],"created_at":"2025-07-04T18:11:16.308Z","updated_at":"2026-05-19T03:37:24.618Z","avatar_url":"https://github.com/smir-ant.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u003cins\u003eSimple\u003c/ins\u003e \u003cins\u003etiny\u003c/ins\u003e \u003cins\u003eembedded\u003c/ins\u003e code editor for \u003cins\u003eany lang\u003c/ins\u003e\n\n###### построено поверх \u003ca href=\"https://prismjs.com/\"\u003eprism.js\u003c/a\u003e | без npm и node.js 🗑️\n\n\n\u003cdetails\u003e\n\u003csummary\u003e\n\u003cpicture\u003e\u003cimg src=\"https://img.shields.io/badge/full size-7.5kB-blue.svg\"\u003e\u003c/picture\u003e\n\u003c/summary\u003e\n\u003c!-- Разграничитель --\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://user-images.githubusercontent.com/84059957/215088292-cf50a16b-422b-43cc-a211-c4169553ca62.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://user-images.githubusercontent.com/84059957/210322548-b635bad5-c53d-4209-a73e-fb0adcc437bf.png\"\u003e\n    \u003cimg height=\"0.8\"\u003e\n  \u003c/picture\u003e\n\n  Всяко лучше, чем например \u003ca href=\"https://highlightjs.org/\"\u003ehiglihts.js\u003c/a\u003e с их .min весом 36kB. И это только для подсветки, мдыы...\n  \n  Вес всех файлов после минификаций:\n\n  \u003cpicture\u003e\u003cimg src=\"img/size.png\"\u003e\u003c/picture\u003e\n\n  Ну или применить сжатие, например brotli, то и того меньше, \u003cstrong\u003e5.7kB\u003c/strong\u003e:\n  \n  ![brotli](https://github.com/user-attachments/assets/ab10a94a-852b-40ee-a94b-207a8f79a4e2)\n\n\n\n\u003c!-- Окончание --\u003e\n\u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://user-images.githubusercontent.com/84059957/215088776-b06bbe95-42fd-4d78-bcae-70cdbeebbbd3.png\"\u003e\n    \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://user-images.githubusercontent.com/84059957/210319906-4f1e79cb-1a45-4e5c-93e9-ae21e197e0b9.png\"\u003e\n    \u003cimg\u003e\n  \u003c/picture\u003e\n\u003c/details\u003e\n\n### Суть\n\n`textarea` с `pre` тегом поверх, который абсолютно точно дублирует и красит содержимое.\n\n### Функционал:\n\n- \u003ckbd\u003eTab\u003c/kbd\u003e и \u003ckbd\u003eShift + Tab\u003c/kbd\u003e – Поддержка табуляции \n- \u003ckbd\u003eCtrl + /\u003c/kbd\u003e – Поддержка комментирования через hotkey \n- \u003ckbd\u003eCtrl + Z\u003c/kbd\u003e и \u003ckbd\u003eShift + Ctrl + Z\u003c/kbd\u003e – Поддержка undo/redo. \u003csub\u003eХоть и за счёт использования execCommand, который считается deprecated. Однако аналогов пока нет (\u003ca href=\"https://github.com/fregante/indent-textarea/issues/30\"\u003eподробнее\u003c/a\u003e). А свою микросистему с памятью через самодельный стек сомнительно внедрять...\u003c/sub\u003e\n- Поддержка resize \u003csub\u003e(убери resize:none из css)\u003c/sub\u003e\n- Богатая система классификации:\n\n| Класс            | Что это             | Пример(sql) |\n|------------------|---------------------|-------------|\n| `.comment`       | Комментарии         | --abc       |\n| `.string`        | Строки              | \"abc\"       |\n| `.keyword`       | Ключевые слова      | SELECT      |\n| `.punctuation`   | Пунктуация          | ;           |\n| `.number`        | Числа               | 123         |\n| `.operator`      | Оператор            | BETWEEN     |\n| `.boolean`       | Булевое значение    | FALSE       |\n| `.function`      | Функции             | COUNT(      |\n\n❗️ Но есть и множество других классов, например \n\n```css\n.url, .property, .selector, .rule {/* в css, например */}\n\n.class-name, .regex {/* js. у regex кста есть и вложенные классы :) */}\n\n.attr-value, .attr-name {/* svg */}\n```\n\n\u003e [!IMPORTANT]\n\u003e js подключается как clike+js\n\u003e ```html\n\u003e\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-clike.min.js\"\u003e\u003c/script\u003e\n\u003e\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/components/prism-javascript.min.js\"\u003e\u003c/script\u003e\n\u003e ```\n\u003e\n\u003e об этом можно легко понять глянув на первые символы `prism-javascript.min.js`:\n\u003e ```text\n\u003e Prism.languages.javascript=Prism.languages.extend(\"clike\"...)\n\u003e ```\n\n\n### Подсветка любого языка. Как поменять:\n\n- изменить ссылку в index.html (prism-sql.min.js) \n- поменять sql на ваш язык внутри scripts.min.js\u003c/sub\u003e\n    \n---\n\nтак как sql модуль prism это не про postgresql, то создал свой модуль `pgSQL.js` с регулярками через chatgpt, ошибки вроде выправил, но не факт что всё 100% идеально.\n\n---\n\n###### js uglified via https://www.uglifyjs.net/\n \n###### css minified via https://www.uglifycss.com/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmir-ant%2Fsimplewebcodeeditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsmir-ant%2Fsimplewebcodeeditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsmir-ant%2Fsimplewebcodeeditor/lists"}