https://github.com/sundarsharma332/codeliner

code snippet highlighter with custom line selection
https://github.com/sundarsharma332/codeliner

code data-visualization program snapshot visualizer

Last synced: 7 days ago
JSON representation

code snippet highlighter with custom line selection

• Host: GitHub
• URL: https://github.com/sundarsharma332/codeliner
• Owner: sundarsharma332
• Created: 2024-09-12T09:38:00.000Z (4 months ago)
• Default Branch: master
• Last Pushed: 2024-09-12T09:49:12.000Z (4 months ago)
• Last Synced: 2024-11-17T03:18:51.113Z (2 months ago)
• Topics: code, data-visualization, program, snapshot, visualizer
• Language: HTML
• Homepage: https://sundarsharma332.github.io/codeliner/
• Size: 142 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        


# Code Preview with Navigation and Custom Highlighting

This application allows you to enter Python code, visualize it with syntax highlighting, navigate through the code line by line, and export snapshots of the code.

![alt text](image.png)

## Usage Steps

### 1. Enter Code

![alt text](image-2.png)

- Click the "Enter Code" button at the bottom of the page to open the code input box.

- Paste or type your Python code into the textarea provided.

- Click the "Submit" button to submit the code.

### 2. Visualize Code

![alt text](image-1.png)

- After submitting the code, it will be displayed in the code preview area with syntax highlighting.

- The first line of the code will be highlighted by default.

### 3. Navigate Through Code

![alt text](image-3.png)

![alt text](image-4.png)

- Use the "Prev" button to navigate to the previous line of code.

- Use the "Next" button to navigate to the next line of code.

- The current line number is displayed in the "Line: X" indicator.

### 4. Export Snapshot

- Click the "Export Snapshot" button to capture a snapshot of the current code preview.

- The snapshot will be downloaded as a PNG file.

![alt text](image-5.png)

## Features

- **Syntax Highlighting**: The code is displayed with syntax highlighting using Prism.js.

- **Line Navigation**: Easily navigate through the code line by line.

- **Custom Highlighting**: The current line is highlighted with a custom style.

- **Snapshot Export**: Export the code preview as a PNG image.

## Notes

- The application is designed to work with Python code.

- The browser zoom is set to 100% when capturing snapshots to ensure consistent image quality.

Enjoy coding and visualizing!