{"id":28684971,"url":"https://github.com/iamnakajim/line-numbers","last_synced_at":"2026-01-20T16:29:32.335Z","repository":{"id":297938358,"uuid":"998287246","full_name":"iamnakajim/line-numbers","owner":"iamnakajim","description":"This repository contains the `\u003cline-numbers\u003e` web component, designed to enhance code readability in `\u003cpre\u003e` and `\u003ctextarea\u003e` elements. Explore the demo and npm package to see how it can streamline your projects! 🐙✨","archived":false,"fork":false,"pushed_at":"2026-01-19T11:14:34.000Z","size":12,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-19T12:48:37.474Z","etag":null,"topics":["cpf","editor","gem","highlightjs","ios","javascript","lekoarts-oss","line","macos","mdx","nstextview","swiftui","syntax-highlighting","textarea","textkit2","textview","theme-ui","vim-script"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":false,"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/iamnakajim.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-06-08T09:31:40.000Z","updated_at":"2026-01-19T11:14:37.000Z","dependencies_parsed_at":"2025-07-06T21:30:54.028Z","dependency_job_id":"ec681c85-6fe3-43ac-b5a5-8fdc9ee73d02","html_url":"https://github.com/iamnakajim/line-numbers","commit_stats":null,"previous_names":["iamnakajim/line-numbers"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/iamnakajim/line-numbers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamnakajim%2Fline-numbers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamnakajim%2Fline-numbers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamnakajim%2Fline-numbers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamnakajim%2Fline-numbers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iamnakajim","download_url":"https://codeload.github.com/iamnakajim/line-numbers/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iamnakajim%2Fline-numbers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28607151,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-20T16:10:39.856Z","status":"ssl_error","status_checked_at":"2026-01-20T16:10:39.493Z","response_time":117,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["cpf","editor","gem","highlightjs","ios","javascript","lekoarts-oss","line","macos","mdx","nstextview","swiftui","syntax-highlighting","textarea","textkit2","textview","theme-ui","vim-script"],"created_at":"2025-06-14T04:00:16.099Z","updated_at":"2026-01-20T16:29:32.319Z","avatar_url":"https://github.com/iamnakajim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Line Numbers Component 📏\n\n![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)\n![License](https://img.shields.io/badge/license-MIT-green.svg)\n![GitHub Release](https://img.shields.io/badge/releases-latest-orange.svg)\n\nWelcome to the **Line Numbers** repository! This project offers a web component that adds line numbers next to various HTML elements. It's perfect for developers looking to enhance code readability or for anyone who needs to display numbered lines in their web applications.\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Customization](#customization)\n- [Examples](#examples)\n- [Contributing](#contributing)\n- [License](#license)\n- [Contact](#contact)\n\n## Features\n\n- Easy integration into existing HTML structures.\n- Lightweight and efficient.\n- Supports various HTML elements like `\u003cdiv\u003e`, `\u003cpre\u003e`, and more.\n- Customizable styles for line numbers.\n- Responsive design to fit different screen sizes.\n\n## Installation\n\nTo get started, you need to download the latest release. Visit [the releases page](https://github.com/iamnakajim/line-numbers/releases) to find the necessary files. Download and execute the component in your project.\n\n## Usage\n\nAfter downloading the component, you can easily integrate it into your HTML. Here’s a simple example:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eLine Numbers Example\u003c/title\u003e\n    \u003clink rel=\"stylesheet\" href=\"path/to/line-numbers.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv class=\"line-numbers\"\u003e\n        \u003cpre\u003e\n            function helloWorld() {\n                console.log(\"Hello, World!\");\n            }\n        \u003c/pre\u003e\n    \u003c/div\u003e\n    \u003cscript src=\"path/to/line-numbers.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nThis code snippet shows how to include the line numbers component in your project. Make sure to adjust the paths to your local files.\n\n## Customization\n\nYou can customize the appearance of the line numbers by modifying the CSS. Here are some common styles you might want to change:\n\n```css\n.line-numbers {\n    counter-reset: line;\n}\n\n.line-numbers pre {\n    position: relative;\n}\n\n.line-numbers pre::before {\n    counter-increment: line;\n    content: counter(line);\n    position: absolute;\n    left: -30px; /* Adjust as needed */\n    color: #888; /* Change color */\n}\n```\n\nFeel free to adapt these styles to match your project's design.\n\n## Examples\n\n### Basic Example\n\nThis example demonstrates a simple usage of the line numbers component with a code block.\n\n```html\n\u003cdiv class=\"line-numbers\"\u003e\n    \u003cpre\u003e\n        // Sample code\n        function add(a, b) {\n            return a + b;\n        }\n    \u003c/pre\u003e\n\u003c/div\u003e\n```\n\n### Advanced Example\n\nIn this advanced example, we will use the component alongside a styled HTML table.\n\n```html\n\u003cdiv class=\"line-numbers\"\u003e\n    \u003ctable\u003e\n        \u003cthead\u003e\n            \u003ctr\u003e\n                \u003cth\u003eItem\u003c/th\u003e\n                \u003cth\u003eQuantity\u003c/th\u003e\n            \u003c/tr\u003e\n        \u003c/thead\u003e\n        \u003ctbody\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eApples\u003c/td\u003e\n                \u003ctd\u003e5\u003c/td\u003e\n            \u003c/tr\u003e\n            \u003ctr\u003e\n                \u003ctd\u003eOranges\u003c/td\u003e\n                \u003ctd\u003e10\u003c/td\u003e\n            \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n\u003c/div\u003e\n```\n\nThis example shows how you can use line numbers with different HTML elements.\n\n## Contributing\n\nWe welcome contributions! If you would like to help improve the project, please follow these steps:\n\n1. Fork the repository.\n2. Create a new branch for your feature or bug fix.\n3. Make your changes.\n4. Submit a pull request.\n\nMake sure to include tests for your changes and update the documentation as needed.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n\n## Contact\n\nFor questions or suggestions, feel free to reach out:\n\n- GitHub: [iamnakajim](https://github.com/iamnakajim)\n- Email: iamnakajim@example.com\n\nThank you for checking out the **Line Numbers** project! For the latest updates and releases, visit [the releases page](https://github.com/iamnakajim/line-numbers/releases). Your feedback is always welcome!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamnakajim%2Fline-numbers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fiamnakajim%2Fline-numbers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fiamnakajim%2Fline-numbers/lists"}