Convert your code into beautiful, formatted documents with ease. codeToDoc transforms source code files into professional PDF documents, Word files, and more with syntax highlighting and customization options.
- Multiple Export Formats - Convert code to PDF, DOCX, TXT, and HTML
- Syntax Highlighting - Beautiful code highlighting for various programming languages
- Theme Selection - Choose from multiple syntax highlighting themes:
- Atom Dark
- Material Light
- Dracula
- Solarized Light
- Tomorrow
- Dark/Light Mode - Toggle between dark and light UI themes
- Drag & Drop Interface - Simply drag your code files to upload
- HTML Preview - Live preview for HTML code
- Code Pasting - Option to directly paste code instead of uploading
- Responsive Design - Works perfectly on mobile, tablet, and desktop
- Document Metadata - Add custom title and author information
- Line Numbers - Option to include or exclude line numbers
- Font Size Adjustment - Customize the size of code text
- Language Selection - Specify the programming language for proper highlighting
- Frontend Framework: React
- UI Components: Material UI
- Syntax Highlighting: react-syntax-highlighter (with Prism)
- PDF Generation: jsPDF, html2canvas
- File Handling: file-saver
- Styling: CSS with Material UI theming
- Node.js (version 14.x or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/Benighter/codeToDoc.git cd codeToDoc -
Install dependencies:
npm install # or yarn install -
Start the development server:
npm start # or yarn start -
Open your browser and navigate to:
http://localhost:3000
npm start- Runs the app in development modenpm test- Launches the test runnernpm run build- Builds the app for productionnpm run eject- Ejects from create-react-app configuration
-
Upload Your Code:
- Drag and drop your code file into the drop area
- OR click "Browse Files" to select a file from your computer
- OR click "Paste HTML Instead" to directly input code
-
Configure Document Settings:
- Select the programming language
- Choose a syntax highlighting theme
- Set document title and author name
- Adjust font size and line number preferences
-
Preview Your Document:
- Review how your code will look with the selected settings
- For HTML files, you can generate a rendered preview
-
Export the Document:
- Select your desired export format (PDF, DOCX, TXT, HTML)
- Click the "Export" button
- Save the file to your computer
- For HTML documents, use the preview feature to see how the rendered page will look
- Large files may take longer to process, especially when exporting to PDF
- For optimal PDF quality, use code with reasonable line lengths
- If you're experiencing performance issues, try reducing the font size or removing line numbers
codeToDoc/
├── public/ # Static files
├── src/ # Source files
│ ├── App.js # Main application component
│ ├── index.js # Entry point
│ ├── index.css # Global styles
│ └── reportWebVitals.js
├── package.json # Dependencies and scripts
└── README.md # Project documentation
- Add code formatting options
- Support for more export formats (Markdown, RTF)
- Batch processing for multiple files
- Code annotation features
- Custom templates for different document types
- Cloud storage integration
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Bennet Nkolele
- GitHub: Benighter
- LinkedIn: Bennet Nkolele
- Portfolio: My Work
This project is licensed under the MIT License - see the LICENSE file for details.
- React Syntax Highlighter for the amazing syntax highlighting capabilities
- Material UI for the beautiful UI components
- jsPDF for PDF generation functionality
- Icons from Material Icons
💻 Built with ❤️ by Bennet Nkolele