{"id":30283218,"url":"https://github.com/tn3w/highlight-it","last_synced_at":"2026-02-18T02:35:25.010Z","repository":{"id":282621253,"uuid":"949157998","full_name":"tn3w/highlight-it","owner":"tn3w","description":"A lightweight syntax highlighting library with themes, line numbers, and copy functionality.","archived":false,"fork":false,"pushed_at":"2026-02-10T17:43:58.000Z","size":187,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-10T21:15:24.344Z","etag":null,"topics":["code","highlight","highlightjs","javascript","javascript-library"],"latest_commit_sha":null,"homepage":"https://www.tn3w.dev/highlight-it","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tn3w.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-03-15T20:07:45.000Z","updated_at":"2026-02-10T17:44:02.000Z","dependencies_parsed_at":"2025-03-15T21:28:47.802Z","dependency_job_id":"17e9a232-5b7b-404c-b045-a54c80fa5da4","html_url":"https://github.com/tn3w/highlight-it","commit_stats":null,"previous_names":["tn3w/highlight-it"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/tn3w/highlight-it","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tn3w%2Fhighlight-it","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tn3w%2Fhighlight-it/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tn3w%2Fhighlight-it/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tn3w%2Fhighlight-it/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tn3w","download_url":"https://codeload.github.com/tn3w/highlight-it/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tn3w%2Fhighlight-it/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29566407,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-18T00:47:08.760Z","status":"online","status_checked_at":"2026-02-18T02:00:09.468Z","response_time":162,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["code","highlight","highlightjs","javascript","javascript-library"],"created_at":"2025-08-16T17:33:51.839Z","updated_at":"2026-02-18T02:35:24.999Z","avatar_url":"https://github.com/tn3w.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\t\u003ca href=\"https://github.com/librecap/librecap\"\u003e\n\t\t\u003cpicture\u003e\n\t\t\t\u003csource height=\"260\" media=\"(prefers-color-scheme: dark)\" srcset=\"https://github.com/tn3w/highlight-it/releases/download/v0.1.4-img/highlight-dark.png\"\u003e\n\t\t\t\u003csource height=\"260\" media=\"(prefers-color-scheme: light)\" srcset=\"https://github.com/tn3w/highlight-it/releases/download/v0.1.4-img/highlight-light.png\"\u003e\n\t\t\t\u003cimg height=\"260\" alt=\"HighlightIt Logo\" src=\"https://github.com/tn3w/highlight-it/releases/download/v0.1.4-img/highlight-light.png\"\u003e\n\t\t\u003c/picture\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eHighlight-It\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA lightweight syntax highlighting library with themes, line numbers, and copy functionality.\u003c/p\u003e\n\nExample:\n\n```html\n\u003ccode class=\"highlight-it\"\u003e\ndef greet(name):\n\t\"\"\"Return a personalized greeting.\"\"\"\n\treturn f\"Hello, {name}!\"\n\n# Example usage\nif __name__ == \"__main__\":\n\tprint(greet(\"World\"))\n\u003c/code\u003e\n```\n\nAdd highlight-it using this script:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/highlight-it@0.2.7/dist/highlight-it-min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\twindow.addEventListener('load', () =\u003e {\n\t\tHighlightIt.init();\n\t});\n\u003c/script\u003e\n```\n\n## Slim Version\n\nThe slim version is a lightweight alternative that excludes highlight.js from the bundle. This provides several benefits:\n\n- Significantly reduced file size for faster page loads\n- Freedom to use your preferred version of highlight.js\n- Ability to share a single highlight.js instance across multiple features\n- Better control over highlight.js configuration and customization\n- Reduced redundancy when highlight.js is already part of your project\n\nTo use the slim version, you'll need to include highlight.js separately before loading highlight-it.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/highlight-it.slim.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n\twindow.addEventListener('load', () =\u003e {\n\t\tHighlightIt.init();\n\t});\n\u003c/script\u003e\n```\n\n## Themes and Styling\n\nHighlight-It provides comprehensive theming support by integrating all themes from [highlight.js](https://github.com/highlightjs/highlight.js/tree/main/src/styles). The library intelligently bundles related theme files (e.g. `theme-dark.css` and `theme-light.css`) into a single `theme.css` file that automatically handles both light and dark modes.\n\n### Adding Themes\n\nInclude your preferred theme by adding a stylesheet link:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/styles/a11y.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/styles/github.min.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/highlight-it@latest/dist/styles/vs2015.min.css\"\u003e\n```\n\n## Data Attributes\n\nHighlightIt supports the following data attributes to customize the appearance and behavior of code blocks:\n\n| Attribute          | Description                                                                     | Example                                                                         |\n| ------------------ | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |\n| `data-language`    | Specifies the programming language for syntax highlighting                      | `\u003cdiv class=\"highlight-it\" data-language=\"javascript\"\u003econst foo = 'bar';\u003c/div\u003e` |\n| `data-filename`    | Displays a filename in the header and auto-detects language from file extension | `\u003cdiv class=\"highlight-it\" data-filename=\"example.js\"\u003econst foo = 'bar';\u003c/div\u003e` |\n| `data-theme`       | Sets the theme to 'light', 'dark', or 'auto' for the specific code block        | `\u003cdiv class=\"highlight-it\" data-theme=\"dark\"\u003econst foo = 'bar';\u003c/div\u003e`          |\n| `data-with-lines`  | Adds line numbers to the code block                                             | `\u003cdiv class=\"highlight-it\" data-with-lines\u003econst foo = 'bar';\u003c/div\u003e`            |\n| `data-line-start`  | Sets the starting line number for the code block and enables line numbers       | `\u003cdiv class=\"highlight-it\" data-line-start=\"10\"\u003econst foo = 'bar';\u003c/div\u003e`       |\n| `data-with-share`  | Adds a share button to the code block and individual lines                      | `\u003cdiv class=\"highlight-it\" data-with-share\u003econst foo = 'bar';\u003c/div\u003e`            |\n| `data-with-download` | Adds a download button to the code block                                      | `\u003cdiv class=\"highlight-it\" data-with-download\u003econst foo = 'bar';\u003c/div\u003e`            |\n| `data-no-header`   | Removes the header (hides language label but keeps copy button as floating)     | `\u003cdiv class=\"highlight-it\" data-no-header\u003econst foo = 'bar';\u003c/div\u003e`             |\n| `data-no-copy`     | Hides the copy button                                                           | `\u003cdiv class=\"highlight-it\" data-no-copy\u003econst foo = 'bar';\u003c/div\u003e`               |\n| `data-with-reload` | Enables live updates - code will be rehighlighted when content changes          | `\u003cdiv class=\"highlight-it\" data-with-reload data-language=\"javascript\"\u003e\u003c/div\u003e`  |\n\n## Usage Example\n\n```html\n\u003c!-- Auto-detect language --\u003e\n\u003cdiv class=\"highlight-it\"\u003e\nconst greeting = 'Hello, world!';\nconsole.log(greeting);\n\u003c/div\u003e\n\n\u003c!-- Basic usage with language --\u003e\n\u003cdiv class=\"highlight-it\" data-language=\"javascript\"\u003e\nconst greeting = 'Hello, world!';\nconsole.log(greeting);\n\u003c/div\u003e\n\n\u003c!-- With filename and line numbers --\u003e\n\u003cdiv class=\"highlight-it\" data-filename=\"app.js\" data-with-lines\u003e\nfunction calculateTotal(items) {\n    return items\n        .map((item) =\u003e item.price)\n        .reduce((total, price) =\u003e total + price, 0);\n}\n\u003c/div\u003e\n\n\u003c!-- With filename and line numbers starting from line 10 --\u003e\n\u003cdiv class=\"highlight-it\" data-filename=\"app.js\" data-line-start=\"10\"\u003e\nfunction calculateTotal(items) {\n\treturn items\n\t\t.map((item) =\u003e item.price)\n\t\t.reduce((total, price) =\u003e total + price, 0);\n}\n\u003c/div\u003e\n\n\u003c!-- With share button --\u003e\n\u003cdiv class=\"highlight-it\" data-language=\"javascript\" data-with-share\u003e\nconst greeting = 'Hello, world!';\nconsole.log(greeting);\n\u003c/div\u003e\n\n\u003c!-- With download button --\u003e\n\u003cdiv class=\"highlight-it\" data-language=\"javascript\" data-with-download\u003e\nconst greeting = 'Hello, world!';\nconsole.log(greeting);\n\u003c/div\u003e\n\n\u003c!-- With download button and specific filename --\u003e\n\u003cdiv class=\"highlight-it\" data-language=\"javascript\" data-with-download data-filename=\"app.js\"\u003e\nconst greeting = 'Hello, world!';\nconsole.log(greeting);\n\u003c/div\u003e\n\n\u003c!-- Dark theme without header --\u003e\n\u003cdiv class=\"highlight-it\" data-language=\"css\" data-theme=\"dark\" data-no-header\u003e\n.container {\n\tdisplay: flex;\n\tjustify-content: center;\n}\n\u003c/div\u003e\n\n\u003c!-- With live updates for streaming code --\u003e\n\u003cdiv class=\"highlight-it\" data-language=\"python\" data-with-reload\u003e\n\t# This code will be automatically rehighlighted as content changes\n\u003c/div\u003e\n```\n\n## Initialization\n\nTo initialize HighlightIt with custom options:\n\n```javascript\n// Default configuration\nHighlightIt.init()\n\n// Custom configuration\nHighlightIt.init({\n\tselector: '.custom-code', // Custom CSS selector\n\tautoDetect: true, // Auto-detect language if not specified\n\taddCopyButton: true, // Add copy button to code blocks\n\tshowLanguage: true, // Show language label in header\n\taddHeader: true, // Add header section to code blocks\n\taddLines: false, // Add line numbers to code blocks\n\taddShare: true, // Add share button to code blocks\n\taddDownload: true, // Add download button to code blocks\n\ttheme: 'auto', // Global theme (light, dark, auto)\n\tdebounceTime: 40 // Debounce time in ms for live updates (lower values = more responsive)\n})\n```\n\n## Live Updates\n\nThe `data-with-reload` attribute enables automatic rehighlighting when code content changes, which is particularly useful for apps that stream in code responses. This feature ensures that code syntax highlighting is applied in real-time as code is being added to the DOM.\n\n### Implementation Example\n\n```javascript\n// Create an empty code block with live updates enabled\nconst codeBlock = document.createElement('div')\ncodeBlock.className = 'highlight-it'\n\n// Add it to your container\ndocument.querySelector('.container').appendChild(codeBlock)\n\n// Add it to HighlightIt\nHighlightIt.highlight(codeBlock, {\n\twithReload: true,\n\tlanguage: 'javascript',\n\taddHeader: true,\n\taddCopyButton: true,\n\taddLines: false,\n\taddShare: false,\n\taddDownload: false,\n\tfilename: 'app.js'\n})\n\n// HighlightIt will automatically rehighlight the code\nfunction onAiResponseChunk(codeChunk) {\n\tcodeBlock.textContent += codeChunk\n\t// No need to manually rehighlight - it happens automatically!\n}\n```\n\n### Benefits\n\n- Real-time syntax highlighting as code streams in\n- No need to manually call highlighting functions after content updates\n- Ensures users see properly highlighted code even during streaming\n- Works with all other HighlightIt features (themes, line numbers, etc.)\n- Debounced to optimize performance during rapid updates\n\n\n## Development\n\n1. Clone the repository\n\n```bash\ngit clone https://github.com/tn3w/highlight-it.git\n```\n\n2. Install dependencies\n\n```bash\nnpm install\n```\n\n3. Build the project\n\n```bash\nnpm run build\n```\n\nOpen `demo.html` in your browser to see the library in action.\n\n## License\n\nCopyright 2025 TN3W\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n\thttp://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftn3w%2Fhighlight-it","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftn3w%2Fhighlight-it","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftn3w%2Fhighlight-it/lists"}