Assignment Code to PDF

Personal

Converts questions, codes and outputs to PDF with syntax highlighting. Built with Next.js, TypeScript, html2canvas, jsPDF, and Tailwind CSS.

Next.jsTypeScripthtml2canvasjsPDFTailwind CSSShadcn UIreact-syntax-highlighter

GitHub Live Demo

🚀 Assignment PDF Generator with HTML2Canvas and jsPDF#

This project is a Next.js-based tool that generates a well-structured PDF file by capturing sections of a webpage using html2canvas and jsPDF. It is designed specifically for students who want to submit programming assignments in a uniform PDF format, featuring code, questions, and terminal outputs. The tool allows adding multiple questions, changing the code theme, and selecting the programming language.

🎥 Demo#

✨ Features#

✅ Question and Answer Input: Add multiple questions with corresponding code snippets and terminal outputs.
🌈 Customizable Themes: Choose different programming language themes for syntax highlighting.
📋 PDF Generation: Generate professional PDFs with customizable layouts.
🔎 Dynamic Content Capture: Include only relevant sections like code and output, excluding unnecessary parts.
⚖️ Standardized Format: Ensure consistent assignment formatting for ease of grading.

🚨 Tech Stack#

Frontend: Next.js 🚀
Code Highlighting: React-Syntax-Highlighter 🌈
PDF Generation: html2canvas and jsPDF 🔄
TypeScript: For enhanced development experience 💎
CSS Modules: Styled components for scoped CSS 💅

📃 How to Use#

1.Clone the Repository:

git clone https://github.com/idityaGE/Assignment-Code-to-PDF.git
cd Assignment - Code - to - PDF

2.Install Dependencies:

npm install

3.Run the Application:

npm start

Access the app at http://localhost:3000.

Generate PDFs: Add questions, code snippets, and terminal outputs.Click "Generate PDF" to download a structured PDF.

🔧 Customization#

Modify PDF Layout#

Adjust margins and page sizes in thehandleGeneratePDF() function.
Include additional DOM elements by updating document.querySelector() logic.

Themes and Languages#

Modify supported languages and themes by updating the React-Syntax-Highlighter configuration.

❤️ Support Me#

☕ Buy Me a Coffee: If you appreciate this tool, consider supporting my work.
- 🐦 Follow Me on Twitter: Stay updated with my latest projects and innovations.

🙏 Contributions#

Contributions are welcome! Submit issues, fork the repository, and open pull requests.Let’s improve this project together.

📜 License#

This project is licensed under the MIT License.See the LICENSE file for more details.

🔗 Repository Link#

GitHub Repository