Assignment Code to PDF
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
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.