{"id":13812626,"url":"https://github.com/slevithan/regex-colorizer","last_synced_at":"2025-04-13T04:07:21.722Z","repository":{"id":3233099,"uuid":"4269180","full_name":"slevithan/regex-colorizer","owner":"slevithan","description":"Highlighter for JavaScript regex syntax","archived":false,"fork":false,"pushed_at":"2024-08-18T18:42:58.000Z","size":177,"stargazers_count":182,"open_issues_count":3,"forks_count":22,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-13T04:07:16.576Z","etag":null,"topics":["regex","regexp","regular-expression","syntax-highlighting"],"latest_commit_sha":null,"homepage":"https://slevithan.github.io/regex-colorizer/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slevithan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2012-05-09T07:03:39.000Z","updated_at":"2025-04-05T17:07:33.000Z","dependencies_parsed_at":"2024-05-20T19:30:01.004Z","dependency_job_id":"cb0b6d90-eefe-418b-bf61-8a44252dbdce","html_url":"https://github.com/slevithan/regex-colorizer","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":0.4,"last_synced_commit":"3b1849485deca06d8c97834cc1fda99c6d680b25"},"previous_names":["slevithan/regex-colorizer"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slevithan%2Fregex-colorizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slevithan%2Fregex-colorizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slevithan%2Fregex-colorizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slevithan%2Fregex-colorizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slevithan","download_url":"https://codeload.github.com/slevithan/regex-colorizer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248661705,"owners_count":21141450,"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":["regex","regexp","regular-expression","syntax-highlighting"],"created_at":"2024-08-04T04:00:53.880Z","updated_at":"2025-04-13T04:07:21.692Z","avatar_url":"https://github.com/slevithan.png","language":"JavaScript","readme":"# Regex Colorizer\n\nRegex Colorizer is a lightweight library (5 KB min/gzip, no dependencies) for adding syntax highlighting to your regular expressions in blogs, docs, regex testers, and other tools. It supports the **JavaScript regex flavor** ([ES2022](https://github.com/slevithan/awesome-regex#javascript-regex-evolution)) with **web reality**. In other words, it highlights regexes as web browsers actually interpret them.\n\nThe API is simple. Just give the elements that contain your regexes (`pre`, `code`, or whatever) the class `regex`, and call `colorizeAll()`. See more usage examples below.\n\nErrors are highlighted, along with some edge cases that can cause cross-browser grief. Hover over errors for a description of the problem.\n\n## Demo\n\nTry it out on the [**demo page**](https://slevithan.github.io/regex-colorizer/demo/), which also includes more details.\n\n## Install and use\n\n\u003e [!IMPORTANT]\n\u003e The latest versions are not yet available on npm or CDNs due to an ongoing issue. Until it's resolved, Regex Colorizer needs to be downloaded from GitHub.\n\n```sh\nnpm install regex-colorizer\n```\n\n```js\nimport {colorizeAll, colorizePattern, loadStyles} from 'regex-colorizer';\n```\n\nIn browsers (using a global name):\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/regex-colorizer@1.0.1/dist/regex-colorizer.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const {colorizeAll, colorizePattern, loadStyles} = RegexColorizer;\n\u003c/script\u003e\n```\n\n## Themes\n\nSeveral themes are available as stylesheets, but you don't need to add a stylesheet to your page to use the default theme. Just run `loadStyles()`.\n\n## Usage\n\n```js\nimport {colorizeAll, colorizePattern, loadStyles} from 'regex-colorizer';\n// Or, if using the browser bundle:\n// const {colorizeAll, colorizePattern, loadStyles} = RegexColorizer;\n\n// Don't run this line if you provide your own stylesheet\nloadStyles();\n\n// Highlight all elements with class `regex`\ncolorizeAll();\n\n// Or provide a `querySelectorAll` value for elements to highlight\ncolorizeAll({\n  selector: '.regex',\n});\n\n// Optionally provide flags\ncolorizeAll({\n  // Flags provided in `data-flags` attributes will override this\n  flags: 'u',\n});\n\n// You can also just get the highlighting HTML for a specific pattern\nelement.innerHTML = colorizePattern('(?\u003c=\\\\d)', {\n  flags: 'u',\n});\n```\n\nIn your HTML:\n\n```html\n\u003cp\u003e\n  This regex is highlighted inline:\n  \u003ccode class=\"regex\"\u003e(?\u0026lt;=\\d)\\p{L}\\8\u003c/code\u003e.\n\n  And here's the same regex but with different rules from flag u:\n  \u003ccode class=\"regex\" data-flags=\"u\"\u003e(?\u0026lt;=\\d)\\p{L}\\8\u003c/code\u003e.\n\u003c/p\u003e\n\u003c!-- Can include any valid flags. Ex: data-flags=\"gimsuyd\" --\u003e\n```\n","funding_links":[],"categories":["JavaScript regex libraries"],"sub_categories":["Regex processors, utilities, and more"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslevithan%2Fregex-colorizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslevithan%2Fregex-colorizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslevithan%2Fregex-colorizer/lists"}