https://github.com/iamnakajim/line-numbers
This repository contains the `<line-numbers>` web component, designed to enhance code readability in `<pre>` and `<textarea>` elements. Explore the demo and npm package to see how it can streamline your projects! 🐙✨
https://github.com/iamnakajim/line-numbers
cpf editor gem highlightjs ios javascript lekoarts-oss line macos mdx nstextview swiftui syntax-highlighting textarea textkit2 textview theme-ui vim-script
Last synced: 4 months ago
JSON representation
This repository contains the `<line-numbers>` web component, designed to enhance code readability in `<pre>` and `<textarea>` elements. Explore the demo and npm package to see how it can streamline your projects! 🐙✨
- Host: GitHub
- URL: https://github.com/iamnakajim/line-numbers
- Owner: iamnakajim
- License: mit
- Created: 2025-06-08T09:31:40.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2026-01-19T11:14:34.000Z (4 months ago)
- Last Synced: 2026-01-19T12:48:37.474Z (4 months ago)
- Topics: cpf, editor, gem, highlightjs, ios, javascript, lekoarts-oss, line, macos, mdx, nstextview, swiftui, syntax-highlighting, textarea, textkit2, textview, theme-ui, vim-script
- Language: JavaScript
- Size: 11.7 KB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Line Numbers Component 📏
Welcome 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.
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Usage](#usage)
- [Customization](#customization)
- [Examples](#examples)
- [Contributing](#contributing)
- [License](#license)
- [Contact](#contact)
## Features
- Easy integration into existing HTML structures.
- Lightweight and efficient.
- Supports various HTML elements like `
`, ``, and more.
- Customizable styles for line numbers.
- Responsive design to fit different screen sizes.
## Installation
To 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.
## Usage
After downloading the component, you can easily integrate it into your HTML. Here’s a simple example:
```html
Line Numbers Example
function helloWorld() {
console.log("Hello, World!");
}
```
This code snippet shows how to include the line numbers component in your project. Make sure to adjust the paths to your local files.
## Customization
You can customize the appearance of the line numbers by modifying the CSS. Here are some common styles you might want to change:
```css
.line-numbers {
counter-reset: line;
}
.line-numbers pre {
position: relative;
}
.line-numbers pre::before {
counter-increment: line;
content: counter(line);
position: absolute;
left: -30px; /* Adjust as needed */
color: #888; /* Change color */
}
```
Feel free to adapt these styles to match your project's design.
## Examples
### Basic Example
This example demonstrates a simple usage of the line numbers component with a code block.
```html
// Sample code
function add(a, b) {
return a + b;
}
```
### Advanced Example
In this advanced example, we will use the component alongside a styled HTML table.
```html
Item
Quantity
Apples
5
Oranges
10
```
This example shows how you can use line numbers with different HTML elements.
## Contributing
We welcome contributions! If you would like to help improve the project, please follow these steps:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes.
4. Submit a pull request.
Make sure to include tests for your changes and update the documentation as needed.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contact
For questions or suggestions, feel free to reach out:
- GitHub: [iamnakajim](https://github.com/iamnakajim)
- Email: iamnakajim@example.com
Thank 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!